如何将（道具或状态）传递给主要布局来自子

Question

我很反应......

• app.js
  • 主要布局
    • 儿童1
    • Child 2
    • 等...

主要布局有一个h1，h2，style.object，所以我需要根据子组件修改它。

更改此主要布局的h1，h2等的最佳方法是什么？

＆＃13;

＆＃13;

class App extends Component {

  render()  {
    
    return (
      <div className="App" >
        <Navbar />
            <Main>
                { this.props.children }
            </Main>
        <Footer />
      </div>
    )
  }
}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

class Main extends React.Component {
    

    render() {

        return (
            <div className="Main">
                <div className="Header" style={this.props.styles.header}>
                    <h1 style={ this.props.styles.h1 }>{ this.props.header1 }</h1>
                    <h2 style={ this.props.styles.h2 }>{ this.props.header2 }</h2>
                </div>

                <div className="MainContent">
                    <div className="InnerContent">
                        { this.props.children }
                    </div>
                </div>


            </div>
        )
    }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

this.props.styles将为this.state.styles

然后

您在updateHeader中定义了接受新样式并调用Main的方法setState} ..

此方法应通过context

传播

然后

孩子会通过this.context.updateHeader(newStyle,..)

调用此方法

主要：

class Main extends React.Component {

    static childContextTypes = {
      updateHeader: React.PropTypes.func
    };  


    updateHeader(styles, header1, header2) {
      this.setState({styles, header1, header2})
    }
    render() {

        return (
            <div className="Main">
                <div className="Header" style={this.state.styles.header}>
                    <h1 style={ this.state.styles.h1 }>{ this.state.header1 }</h1>
                    <h2 style={ this.state.styles.h2 }>{ this.state.header2 }</h2>
                </div>

                <div className="MainContent">
                    <div className="InnerContent">
                        { this.props.children }
                    </div>
                </div>


            </div>
        )
    }
}

支持Something是Main个孩子之一：

class Something extends React.Component {
     static contextTypes = {
          updateHeader: React.PropTypes.func
        };  ;

       componentDidMount() {

         this.context.updateHeader({styles:header:{} , h1:{}, h2{} }, "i am header1", "i am header 2");
       }

}