將道具從組件傳遞到組件| 反應

Question

我想將主要組件的道具或功能傳遞給子組件以工作。 完全我需要將道具傳遞給三個組成部分才能到達其子組成部分。 下面是我的代碼，無法正常工作。 我想，我的代碼會說我想要實現的目標。

如果我想在單個組件中實現相同的功能，則效果很好。 但是，當我嘗試分解為不同的組件時，我做不到。 我在傳遞道具時犯了錯誤。

提前致謝。

/**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;

Answer 1

ComponentThree正在設置自己的狀態，而不是Home的狀態。 由於沒有什么改變Home的狀態，因此它將始終呈現同一事物。

如果要從子組件中更新父組件的狀態，則必須向下傳遞update回調作為道具。 在這種情況下，您需要將handleClick從Home傳遞到ComponentThree ，然后將其用作按鈕的單擊處理程序。

另外，您正在嘗試從子組件的this.state中讀取componentToRender ， this.state需要使用this.props ，因為要將這些值作為props傳遞給了他們。

還值得注意的是，當嘗試使狀態可用於深層嵌套的組件時， React Context可能會很有用-也就是說，它們不是您應該過度使用的東西，我建議在嘗試之前先將其作為道具傳遞出去深入了解使用上下文。