A schematic example, we have 2 classes:

var Child = React.createClass({ getInitialState: { objects: {} }, render: function() { return ( <div value={this.state.objects}></div> ); }, }); var Parent = React.createClass({ render: function() { return ( <Child/> ); }, });

in Parent you need to send data. You need to send an object that is in Child. One of the options is:

 var Child = React.createClass({ render: function() { return ( <div value={this.props.objects}></div> ); }, }); var Parent = React.createClass({ getInitialState: { objects: {} }, render: function() { return ( <Child objects={this.state.objects}/> ); }, });

That is, we pass the objects parameter from an ancestor to the child, and we can change it using child methods. The question arose whether it was possible somehow without these dancings with parameter passes from the ancestor to get access to the child's state in order to pull out some data from there (without using the concepts of flux \ redux) If so, how can this be done?

  • one
    possible via ref. This is generally a crutch which should not be abused. You can make a condition in the parent, it is generally the most correct. You can arrange as you put it "dances with the forwarding of parameters from the ancestor." This is normal. In any case, this is a signal from the category of "stop and think about areas of responsibility" - Duck Learns to Hide

1 answer 1

use

ref

 class AutoFocusTextInput extends React.Component { componentDidMount() { console.log(this.textInput); } render() { return ( <CustomTextInput ref={(input) => { this.textInput = input; }} /> ); } }