如何根据子组件状态更改父组件样式元素?

时间:2016-03-30 20:03:40

标签: javascript reactjs react-router

我试图弄清楚如何在子组件状态更改时将样式设置为父组件     考虑一个场景,其中我们有一个容器组件包含菜单和侧栏作为其静态元素加     子组件。在单击菜单时,它的相应组件将呈现为子组件。

我使用带有react-router的嵌套绝对路由,如下所示

    <Route component={ home } >
       <Route path="menu-1" component={ menu-1 } />
       <Route path="menu-2" component={ menu-2 } />
       <Route path="menu-3" component={ menu-3 } />

在home组件中我有以下内容:

    <div className='root'>
        <menuComponent />
        <sideBarComponnent />
        {this.props.children}

    </div>

正如您所看到的,我无法将回调函数传递给子组件 对于menu-1,menu-2我没有问题,但是当点击menu-3并在内容标签中渲染它的组件时,我需要给它全宽并将侧栏显示为无     当侧栏在容器组件中呈现时,我无法以常规方式控制它在儿童内部 -

我正在寻找一种能够在家庭组件中处理它的方法

2 个答案:

答案 0 :(得分:0)

您可以在子组件的道具中添加功能。 当您需要更改父样式时,可以在子组件中调用此函数。 此函数将更改父组件的状态并更改其样式。

示例:

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            backgroundColor: 'yellow'
        }
    }

    onChangeStyle(backgroundColor) {
        this.setState({
            backgroundColor: backgroundColor
        })
    }

    render() {
        return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}>
            <Child onChangeParentStyle={this.onChangeStyle.bind(this)}/>
        </div>
    }
}

class Child extends React.Component {
    onClick() {
        this.props.onChangeParentStyle('red');
    }
    render() {
        return <span onClick={this.onClick.bind(this)} style={{background: 'white', cursor: 'pointer'}}>
            Change parent style
        </span>
    }
}

React.render(<Parent />, document.getElementById('container'));

Example on JSFiddle

答案 1 :(得分:0)

您可以在componentWillMount中使用this.props.location.pathname,如下所示:

componentWillMount(){
 let propPlainUrl = /[a-zA-Z]+/g.exec(this.props.location.pathname);
               this.setState({
                  activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
            });

您可以使用componentWillMount根据所选路线菜单设置活动键的初始值

上面的代码只是在家庭组件的初始呈现中解决了一次问题      但是,如果您希望在单击菜单事件上更新组件时保持更新过程,该怎么办?

您可以使用相同的代码,稍作更改,如下所示:

componentWillReceiveProps(nextProps){
     let propPlainUrl = /[a-zA-Z]+/g.exec(nextProps.location.pathname);
     this.setState({
       activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
     });
   }

```

componentWillReceiveProps可让您更新组件更新的状态