將props.children傳遞到有條件渲染的組件

Question

我有Product組件，該組件基於Product組件狀態中的showModal布爾值呈現模態組件。 這是Product的渲染方法

  render() {
    const { .... } = this.props.data;
    return (
      <>
        {this.state.showModal && (
          <Modal
            product={this.props.data}
            toggleModal={this.onToggleModal}
            addToCart={this.props.onAddToCart}
          />
        )}
        <li className="product-body">
          <img
            src=".."
            onClick={this.onToggleModal}
          />
          <h2>{...}</h2>
          <h3>{..}</h3>
          <h3>{..}</h3>
          <h2 className="product-price">{...}</h2>
          <button type="button" onClick={this.props.onAddToCart}>
            Buy now
          </button>
        </li>
      </>
    );
  }

我想將li內部的內容傳遞給Modal 。在這種情況下，如何使用props.children作為Modal組件，所以我不必傳遞要顯示為props的數據？

Answer 1

如果Modal是另一個組件，則可以將列表傳遞為

     render() {
        const { .... } = this.props.data;
        return (
          <>
            {this.state.showModal && (
              <Modal
                product={this.props.data}
                toggleModal={this.onToggleModal}
                addToCart={this.props.onAddToCart}
              >
              <ListItems {...this.props}/>    
              </Modal>
            )}
              <ListItems {...this.props}/>
          </>
        );
      }

讓ListItems作為一個單獨的組件

class ListItems extends React.Component {
        render() {
           return(
           <li className="product-body">
                  <img
                    src=".."
                    onClick={this.onToggleModal}
                  />
                  <h2>{...}</h2>
                  <h3>{..}</h3>
                  <h3>{..}</h3>
                  <h2 className="product-price">{...}</h2>
                  <button type="button" onClick={this.props.onAddToCart}>
                    Buy now
                  </button>
                </li>
            )}

}

Answer 2

class ListItems extends React.Component {
    render(){
        return(
            <li className="product-body">
                <img
                    src=".."
                    onClick={this.onToggleModal}
                />
                <h2>{...}</h2>
                <h3>{..}</h3>
                <h3>{..}</h3>
                <h2 className="product-price">{...}</h2>
                <button type="button" onClick={this.props.onAddToCart}>
                    Buy now
                </button>
            </li>
        )
    }
}

class Wrapper extends React.Component {
    render(){
        return (
            <Modal
                product={this.props.data}
                toggleModal={this.onToggleModal}
                addToCart={this.props.onAddToCart}
            >
                <ListItems />
            </Modal>
        )
    }
}
class Modal extends React.Component {
    render(){
        return (
            <div>
                <h1>Modal Title</h1>
                <div>{this.props.children}</div>
            </div>
        )
    }
}