reactjs - 在构造函数中动态创建 Ref

Question

我想让我的子组件有一个引用，但我不希望用户在创建组件时必须指定引用。所以说我有这样的事情:

<Parent>
    <Child />
    <Child />
</Parent>

我希望父组件能够访问子组件的状态。简单的方法是为每个组件添加一个引用，但我希望这是在 constructor() 函数期间完成的事情，以便将其从最终用户中抽象出来，就像我想的那样喜欢这些组件被泛化。

有没有一种简洁的方法可以让父组件可以访问子组件的状态，例如在创建子组件时，您有类似的东西:

class Child extends Component {
    constructor(){
        super();
        this.state = {'abc': 123}
        this.ref=Math.random();
    }
}

这样我就可以在 Parent 类中执行以下操作:

 class Parent extends Component {
     componentWillMount(){
         console.log(this.refs);
     }
 }

所以我希望能够声明一组组件，例如:

class App extends Component {
    render(){
       <Parent> <Child /> <Child /> </Parent>
    }
}

这样我就可以访问每个子组件及其在父组件遍历子组件时的状态。

Answer 1

我正在制作的表单需要完全相同的东西，这就是我想出的自动将引用添加到子组件的方法

鉴于你有:

<Parent>
    <Child />
    <Child />
</Parent>

您可以在父组件渲染函数中使用它来为每个子组件添加一个引用。

render () {
  let wrappedChildren = [];

  React.Children.map(this.props.children, (child, i)=> {
    if (!child) {
      return;
    }
      let refName = 'child' + i
      wrappedChildren.push(React.cloneElement(child, {
        key: refName,
        ref: refName,
      }
    ));
  }, this);
  return (
    <View>
        {wrappedChildren}
    </View>
  )
}

这将为每个 Child 添加一个 ref，该引用由一个字符串加上当前 map 的索引组成，然后以相同的顺序呈现它们，相当于这样做:

<Parent>
    <Child ref="child0" />
    <Child ref="child1" />
</Parent>

我知道字符串引用已被弃用，但我试图保持简单，您也可以通过更改将引用用作回调:

ref: refName

到:

ref: (c) => { this[refName] = c }

然后在父组件中以this.child0为例。

希望对你有帮助。