在组件之间传递 props |反应答案

【问题标题】：Passing props from component to component | React在组件之间传递 props |反应
【发布时间】：2019-02-25 17:41:18
【问题描述】：

我想将主组件的道具或功能传递给子组件来工作。完全我需要将道具传递给三个组件才能到达它的子组件。下面是我的代码，它不能正常工作。我想，我的代码会说，我想实现什么。

如果我想在单个组件中实现相同的目标，它会很好地工作。但是，当我尝试分解成不同的组件时，我做不到。我在传递道具时犯了错误。

提前致谢。

/**Home Component**/

class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: null,
            componentToRender: null //tells switch which component to render
        };
        this.renderComponent = this.renderComponent.bind(this)
    };

    handleEvent = (button) => {
        this.setState({value: button});
    };
    handleClick = () => {
        this.setState({componentToRender: this.state.value})//take the
        // currently selected component and make it the component to render
    };
        //extract the switch statement to a method of its own
    renderComponent() {
        switch (this.state.componentToRender) {
            case 0:
                return 'cool';
            case 1:
                return 'not cool';
            case 2:
                return 'medium cool';
            default:
                return <ComponentOne toRender={this.state.componentToRender} />;
        }
    }

    render() {
        return (
            <div>

                {this.renderComponent()}
            </div>
        );
       }
      }


      export default Home;

/**Component one***/
import ComponentTwo from './ComponentTwo.js'
class ComponentOne extends Component {
render(){
return (
<ComponentTwo toRender={this.state.componentToRender}/>
 );
}
}
export default ComponentOne;

/**Component two***/

import ComponentThree from './ComponentThree.js'
class ComponentTwo extends Component {
render(){
return (
<ComponentThree toRender={this.state.componentToRender}/>
);
}
}
export default ComponentTwo;


/**Component three***/
class ComponentThree extends Component {

 constructor(props){
    super(props);
    this.state = {
        value: null,
    };
    };

    handleEvent = (button) => {
      this.setState({value: button});
  };

    handleClick = () => {
      this.setState({componentToRender: this.state.value});
  };
render(){
return (
 <div >
                    <button onClick={() => this.handleEvent(0)}>Component
                        One</button>
                    <button onClick={() => this.handleEvent(1)}>Component
                        Two</button>
                    <button onClick={() => this.handleEvent(2)}>Component
                        three</button>
                    <button onClick={() => this.handleEvent(3)}>Component
                        Four</button>

                    <button variant="contained" onClick={this.handleClick}>
                        Register Now
                    </button>
                </div>
);
}
}
export default Componentthree;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

ComponentThree 正在设置自己的状态，而不是Home 的状态。因为Home的状态没有任何改变，所以它总是会渲染同样的东西。

如果您想从子组件中更新父组件的状态，则必须将更新回调作为道具传递。在这种情况下，您需要将 handleClick 从 Home 向下传递到 ComponentThree，然后使用 that 作为按钮的点击处理程序。

此外，您正在尝试在子组件中从 this.state 读取 componentToRender - 您需要使用 this.props，因为您将值作为道具向下传递。

还值得注意的是，React Context 在尝试使状态可用于深度嵌套的组件时很有用 - 也就是说，它们不是你应该过度使用的东西，我建议掌握传递东西的窍门在尝试使用上下文之前作为道具。

【讨论】：