是否可以在React Native中从其无状态组件子级更改父级的状态？

Question

In my App.js, I have initialized some states like so,

export default class App extends React.Component {
  constructor(){
    super();
     this.state = {
            myfirststate: '',
            mysecondstate: '',
     }    
    }
    ...
   }

Now I have a ChildComponent.js which is stateless and is like this which has a button and when clicked, changes the state of myfirststate from null to hello .

 export default class ChildComponent extends React.Component {
   render() {
    return (
      <View>
        <Button
          title="clickme"
          onPress={() => 
             this.setState({myfirststate: "hello"})
        />
      </View>
      );
     }
    }

Is it possible to do something like this? I always thought I had to pass the value of states as arguements in a function which was passed from parent component to child like this instead.

App.js

 export default class App extends React.Component {
  constructor(){
   super();
    this.state = {
        myfirststate: '',
        mysecondstate: '',
     }    
   }

 functiontopassvalues(values) {
    this.setState({
        myfirststate: values
    })
   }
   <ChildComponent functiontopassvalues={this.functiontopassvalues} />
  }

And in ChildComponent.js I would do something like this

    export default class ChildComponent extends React.Component {
      render() {
        return (
         <View>
           <Button
            title="clickme"
             onPress={() => 
             {this.props.functiontopassvalues("hello")}
        />
      </View>
      );
     }
    }

I hope I am making sense, please let me know what is the correct method to do it and why it is so. Also, does it apply to both react native and react.js?

Answer 1

Your approach is correct, but your child component is aware what value needs to be passed to parent, technically it is correct, but it's not scalable. You can pass an onPress handle to child component and in parent set whatever value you want in parent state.

Consider following example

export default class App extends React.Component {
 constructor(){
  super();
  this.state = {
    myfirststate: '',
    mysecondstate: '',
  }    
 }

 functiontopassvalues= (values) => {
  this.setState({
    myfirststate: values
  });
 }
 <ChildComponent title="click me" onPress={() => this.functiontopassvalues('hello')} />
}

Child component can be made scalable by a few changes

export default class ChildComponent extends React.Component {
  render() {
    return (
     <View>
       <Button
         title={this.props.title}
         onPress={this.props.onPress}
       />
     </View>
   );
 }
}

It is always better to use any state management tools as specified by @Sam. They are pretty helpful.

Answer 2

Your way of solving the problem is a fair and correct, but it isn't necessarily scalable, and you are correct in that you can't alter state of a parent in a child.

I would recommend checking out tools like Redux , MobX or Apollo Link State that all try to solve the eternal problem of state management.