javascript - 在子组件中调用父函数

Question

我正在尝试将一个组件包装在另一个组件中，并从该“一个”组件调用函数。

<Parent>
    <Child1>
    <button
        onClick={
        //toggleSomething
        console.log("Run function `toggleSomething` from parent")
        }
    >
        Change state 1
    </button>
    </Child1>

    <Child2>
    <button
        onClick={
        //toggleSomething
        console.log("Run function `toggleSomething` from parent")
        }
    >
        Change state 2
    </button>
    </Child2>
</Parent>

在父组件中我有:

class Parent extends React.Component {
  state = {
    something: false
  };

  toggleSomething = () => {
    this.setState({
      something: true
    });
  };

  render() {
    return <div className="parentClasses">{this.props.children}</div>;
  }
}

这里是 Playground :https://codesandbox.io/s/1ykllwnyq3

有解决办法吗？

Answer 1

承担这些组件的责任:

• Parent : 照顾好国家。
• Child1和Child2 :通用 UI 容器。
• App :照顾Parent的状态已渲染。

这可以使用 render props 来完成技术。

在下面的示例中，不是将元素作为子元素传递给 <Parent> , a function is passed in instead .

class App extends React.Component {
  render() {
    return (
      <div>
        <Parent>
          {toggle => (
            <React.Fragment>
              <Child1>
                <button onClick={toggle}>Change state 1</button>
              </Child1>
              <Child2>
                <button onClick={toggle}>Change state 2</button>
              </Child2>
            </React.Fragment>
          )}
        </Parent>
      </div>
    );
  }
}

class Parent extends React.Component {
  state = {
    something: false
  };

  toggleSomething = () => {
    this.setState({
      something: true
    });
  };

  render() {
    return (
      <div className="parentClasses">
        {this.state.something.toString()}
        {this.props.children(this.toggleSomething)}
      </div>
    );
  }
}

const Child1 = props => {
  return <div class="someClasses">{props.children}</div>;
};

const Child2 = props => {
  return <div class="someOtherClasses">{props.children}</div>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>