react component - parent child interaction; component Lifecycle

问题

I am developing a simple browser app to get some specific data from the user. I have several components to simplify the proccess of collecting that data, but I am currently rethinking my way of rendering this component.

Basically, i have my main component, which uses state to keep track of which component to render.

I am doing this for almost all of my components. Also, i also have a function inside the parent component, that i pass to the child component via props, and that is used as a callback to pass the child state to its parent, when that component is no longer useful.

class Main extends React.Component {
  constructor(props){
     this.state = {
        renderA: true,
        renderB: false,
        childState: null
     }
  }

  collectState(state){
      this.setState({
         childState: state
     });
  }

  render() {
     let content = null;
     if(this.state.renderA === true){
         content = <ComponentA />
     } else {
         content = <ComponentB />
     }
     return(
      <div>
         {content}
      </div>);
   }
}

So, using the above example, the child would be something like this

class ComponentA extends React.Component {
   constructor(props){
     super(props);
     this.state = {
        stop: false,
        usefullInfo: null
     }

   destroy() {
      this.props.collectstate(this.state.usefullInfo)
   }

   render(){
    render something (like a Form) untill this.state.usefullInfo is set;
    in that case, set this.state.stop true which will call destroy, passing the usefull information to parent
   }
}

So, this method works for me, but i can see clearly that most probably this is not the way to do this.

At this point my question are:

1) how can I stop rendering a component without having to track it with some property like this.state.stop ?

2) if i want to render 2 different components, like in the main component, do I always have to keep a renderA and renderB property on state, to render one or another?

3) is there a better way to pass information from child to parent? i am currently using a callback function passed via props from parent to child, and i am invoking that callback when the component has done its purpose

4) any general suggestions on how to improve the quality of the above code?

Thank you for you help :)!

回答1:

Your example works fine, but in React it is recommended to lift state up when handling data from multiple children (source). So I would recommend to keep the sate of every children in the parent, and pass props with values and handlers to the children.

Here's a sample app you can check. The form components handle the case you want to implement.

To answer your questions:

1. The parent component should decide, based on its own state, whether to render a child component or not.
2. It's not needed to keep variables on state about what component to render. that should be computed in render() based on the parent's state
3. Yes, callback are the recommended way to pass information to parents
4. Code quality looks good. You can always do good with tools like prettier or ESlint.

Here's an example:

class Main extends React.Component {
  constructor(props) {
    this.state = {
      stateA: '',
      stateB: '',
    };
  }

  handleStateChange(name, value) {
    this.setState({
      [name]: value,
    });
  }

  render() {
    const { stateA, stateB } = this.statel;

    const shouldRenderA = !stateA;

    if (shouldRenderA) {
      return <ComponentA value={stateA} onChange={value => this.handleStateChange('stateA', value)} />;
    }
    return <ComponentB value={stateA} onChange={value => this.handleStateChange('stateB', value)} />;
  }
}

class ComponentA extends React.Component {
  render() {
    const { value, onChange } = this.props;

    return <input type="text" value="value" onChange={onChange} />;
  }
}

来源：https://stackoverflow.com/questions/45950097/react-component-parent-child-interaction-component-lifecycle