將函數傳遞給this.props.children

Question

似乎最近React不會像過去那樣將this.props.children視為函數。

我剛剛編寫了一個Modal組件，將其closeModal函數傳遞給子代，

render() {
  return (
    <Modal>
      {
        (closeModal) => {
          return (<span onClick={closeModal}>Click to close modal</span>)
        }
      }
    </Modal>
  )
}

模態看起來像這樣

class Modal extends React.Component {
  constructor(props) {
    this.state = { show: true }

    this.close = this.closeModal.bind(this)
  }

  closeModal() {
    this.setState({ show: false })
  }

  render() {
    if (!this.state.show)
      return null

    return (
      <div>
        { this.props.children }
      </div>
    )
  }
}

我試圖通過this.props.children({ closeModal: this.closeModal })將函數作為道具傳遞，猜猜是什么，根據最新的React 16.9， this.props.children不是函數。

作為使用GraphQL的人們的參考，我看到Apollo客戶端的<Mutation>和<Query>工作方式幾乎相同。

如何實現？

編輯：為什么不重復？ 因為其他答案依賴this.props.children作為函數，而最近React現在卻呈現錯誤，要求針對此問題的新方法：TypeError：this.props.children不是函數

Answer 1

我已經回答了需要更新的內容，以顯示出什么問題以及如何在下面的頁面中對其進行更改。

class Modal extends React.Component {
  constructor(props) {
    // 1️⃣ Make sure to make `props` available in this component.
    // This call is what makes `this.props` call to be available within `Modal`.
    super(props);

    this.state = { show: true };

    // 2️⃣ Assign a newly bound method to the matching class method
    // this.close = this.closeModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  closeModal() {
    this.setState({ show: false });
  }

  render() {
    if (!this.state.show) return null;

    // 3️⃣ Pass the modal handler to children
    // If you had kept `this.close`, then when you pass the handler
    // "{ closeModal: this.close }" instead of "{ closeModal: this.closeModal }"
    return <div>{this.props.children({ closeModal: this.closeModal })}</div>;
  }
}

function App() {
  return (
    <div className="App">
      <Modal>
        {/* 4️⃣ destructure `closeModal` */}
        {({ closeModal }) => {
          return <button onClick={closeModal}>Click to close modal</button>;
        }}
      </Modal>
    </div>
  );
}

正如Emile Bergeron所指出的那樣 ，您可以傳遞this.props.children(this.close)而不是對象，但是我發現它更易於閱讀/使用。

您可以分叉並嘗試或運行下面的代碼片段〜
感謝Emile Bergeron在評論中的建議〜

 class Modal extends React.Component { constructor(props) { super(props); this.state = { show: true }; // this.close = this.closeModal.bind(this); this.closeModal = this.closeModal.bind(this); } closeModal() { this.setState({ show: false }, () => { console.log(`Modal closed`); }); } render() { if (!this.state.show) return null; return <div>{this.props.children({ closeModal: this.closeModal })}</div>; } } function App() { return ( <div className="App"> <Modal> {({ closeModal }) => { return ( <button type="button" onClick={closeModal}> Click to close modal </button> ); }} </Modal> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

試試這個

class Modal extends React.Component {

  constructor(props) {
    this.state = { show: true }

    this.close = this.closeModal.bind(this)
  }

  closeModal() {
    this.setState({ show: false })
  }

  render() {
    if (!this.state.show)
      return null

    return (
      <div>
        { this.props.children(this.close) }
      </div>
    )
  }
}