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

我想弄清楚如何在子组件状态改变时设置样式到父组件
考虑一个场景，其中我们有一个包含菜单和边栏作为其静态元素的容器组件加上子组件。当点击菜单时，相应的组件将呈现为子组件。如何根据子组件的状态更改父组件样式元素？

我使用的是反应路由器嵌套的绝对路径如下

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

家组件内我有话如下：

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

    </div>

，你可以看到我不能通过回调功能的儿童组件菜单1，菜单2我没有问题，但点击菜单3并渲染它的组件在内容标签，
我需要给它的全长，并设置侧栏显示为无 WHI乐边栏的容器组件已使我无法控制它的孩子，一个内部的正常做法

林寻找一种方式，它可以是能够处理它带回家组件内部

来源

2016-03-30 Fakhruddin Abdi

你可以在子组件的道具中添加功能。当你需要改变父类型时，你可以在子组件中调用这个函数。该函数将改变父组件的状态并改变它的样式。

实施例：

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

来源

2016-03-30 20:15:15

感谢您详细的解答，@Alesandr 其实我知道回调函数，但我的情况是不同的我已更新问题 –

您可以使用React.cloneElement dd道具进入儿童。 –

可以使用this.props.location.pathname内部componentWillMount如下：

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将让你在组件更新更新状态

来源

2016-03-31 11:18:14

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

回答

相关问题