我是React的新手,我想知道如何在单击ID为“ child”的div时更改id为“ parent”的div的样式。
<div id="parent"></div>
#parent{display:block;}
var Products=React:createClass({
showHide: function(){
// change style of parent id's "display:block" to "display:none"
},
render: function(){
return (
<div id="child" onclick={this.showHide}>ABCD</div>
);
});
ReactDOM.render(<Products />,document.getElementById('parent'));
答案 0 :(得分:0)
React以一种单向数据流的方式进行处理。父组件通过道具与子组件通信,子组件通过回调道具与父子通信。您需要从父级传递一个回调prop到子组件,然后再更新父级的状态,然后通过切换style
prop(内联样式)或使用{{切换CSS类来更新样式。 1}}属性。
这里是一个示例,其中子组件使用className
属性更新父组件的前景色。 style
只是一个示例名称,因为您没有指定为什么孩子要更新父对象的上下文,但是可以使用任何名称。 ChildComponent可以使用onTrigger
将任何数据传递回父级,然后父级可以根据需要进行处理,如onTrigger
函数所示。
handleTrigger