在构造函数中动态创建Ref

Question

我想让我的子组件有一个ref，但是我不希望用户在创建组件时必须指定ref。所以说我有这样的东西：

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

我希望父组件能够访问子组件的状态。最简单的方法是为每个组件添加一个ref，但我希望这是在constructor（）函数中完成的，以便从最终用户那里抽象出它，因为我希望这些组件被通用化。

有没有一种干净的方法可以让父组件访问子组件的状态，例如当创建子组件时，您有以下内容：

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

因此，在父类内部，我可以执行以下操作：

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

因此，我希望能够声明一组组件，如：

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

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

Answer 1

1. 我希望父组件能够访问子组件的状态。

State只能访问组件本身。父和子组件只能访问它们自己的状态。您可以将值传递给子state作为props，但是父组件不能访问子组件状态本身。

将参照设置为子零部件。

你为什么要这个？Ref用于管理焦点、文本选择或媒体播放。
触发命令式动画。
与第三方DOM库集成。

请访问此链接了解Ref的用法。
https://facebook.github.io/react/docs/refs-and-the-dom.html

不管怎样，组件可以有自己的ref，你可以设置ref为子组件，

render: function() {
    return (
      <div>
        <Child ref="child" />
        <div><button onClick={this.handleClick}>ACCESS REF</button></div>
      </div>
    );
  },

handleClick: function() {
    alert(this.refs.child.refs.input.getDOMNode().value);
  }
});

let Child = React.createClass({
  render: function() {
    return <input ref="input" />;
  }
});

我建议，你要么把电话回传给孩子们，作为完成工作的道具

Answer 2

在这种方法中，父组件是在渲染中使用子组件的组件。您可以通过调用子对象的方法来操纵子对象的“状态”。

Parent.js

class Parent extends Component {
  refs = [];

  componentDidMount() {
    this.refs[0].doSelect();
  }

  setRef = ref => {
    this.refs.push(ref);
  }

  render() {
    return (
      <div>
        <Child ref={this.setRef} />
        <Child ref={this.setRef} />
      </div>
     )
   }
}

Child.js

class Child extends Component {
  state = { isSelected: false }

  doSelect = () => {
    this.setState({ isSelected: true })
  }

  render() {
    return <div className="child" />
  }
}

Answer 3

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

鉴于你有：

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

您可以在父组件渲染函数中使用它向每个子组件添加ref。

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>
  )
}

这将为每个子级添加一个ref，该子级由一个字符串加上当前贴图的索引组成，然后以相同的顺序渲染它们，这相当于执行以下操作：

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

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

ref: refName

致：

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

然后在父组件中使用它，例如this.child0。

希望有帮助。