Question

我有一个子级和子级组件，我想在父级组件中访问它们的引用以进行某些DOM操作。有多个引用，孙子组件中的两个引用需要是一个集合，子组件中的一个是一个简单值

我已经在ref上引用了先前的问题，并且已经尝试过forwardRefs，但是我似乎并没有做对。以下是我尝试过的

class Child extends Component {
  render() {
    var renderChildren = this.props.data.nameValuePairs.map(function(
      item,
      index
    ) {
      return (
        <GrandChild
          title={item.title}
          description={item.description}
          index={index}
        />
      );
    });
    return <div ref={el => (this.childItem = el)}>{renderChildren}</div>;
  }
}

class GrandChild extends Component {
  render() {
    renderChild = (
      <div ref={el => (this.items[this.props.index] = el)}>
        <div ref={el => (this.items2[this.props.index] = el)}>
          <div>
            <h3>{this.props.headline}</h3>
          </div>
          <div>
            <p>{this.props.description}</p>
          </div>
        </div>
      </div>
    );
    return renderChild;
  }
}

//need to access the refs here for DOM manipulation
class Parent extends Component {
  render() {
    return <Child data={this.state.data} />;
  }
}

将多个引用从子组件传递到父组件

0 个答案: