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

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 以一种单向数据流的方式处理这个问题。父组件通过 props 与子组件通信，子组件通过回调 props 与父组件通信。您需要将回调 Prop 从父级传递给子组件，然后更新父级的状态，然后通过切换 style Prop (内联样式)或切换 CSS 类来更新样式className 属性。

这是一个示例，子组件使用 style 属性更新父组件的前景色。 onTrigger 只是一个示例名称，因为您没有指定子项更新父项的上下文，但它可以命名为任何名称。 ChildComponent 可以使用 onTrigger 将任何数据传递回父级，然后父级可以根据需要处理它，参见此处的 handleTrigger 函数。

const ChildComponent = ({ onTrigger }) => (
  <div id="child" onClick={() => onTrigger("red")}>ABCD</div>
);

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    // Set the initial state value
    this.state = { color: "green" };

    // One of a few ways to bind the function
    this.handleTrigger = this.handleTrigger.bind(this);
  }

  handleTrigger(color) {
    this.setState({ color: color });
  }

  render() {
    return (
      <div id="parent" style={{ color: this.state.color }}>
        <ChildComponent onTrigger={this.handleTrigger} />
      </div>
    );
  }
}