Question

我是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'));

Answer 1

React以一种单向数据流的方式进行处理。父组件通过道具与子组件通信，子组件通过回调道具与父子通信。您需要从父级传递一个回调prop到子组件，然后再更新父级的状态，然后通过切换style prop（内联样式）或使用{{切换CSS类来更新样式。 1}}属性。

这里是一个示例，其中子组件使用className属性更新父组件的前景色。 style只是一个示例名称，因为您没有指定为什么孩子要更新父对象的上下文，但是可以使用任何名称。 ChildComponent可以使用onTrigger将任何数据传递回父级，然后父级可以根据需要进行处理，如onTrigger函数所示。

handleTrigger

在React中单击子元素时更改父元素的样式

1 个答案: