将 props.children 传递给有条件渲染的组件答案

【问题标题】：Passing props.children to a conditionally rendered component将 props.children 传递给有条件渲染的组件
【发布时间】：2018-07-25 07:18:50
【问题描述】：

我有Product 组件，它基于showModal 布尔值在Product 组件状态下呈现模态组件。这是Product中的render方法

  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 组件，所以我不必传递数据显示为道具？

【问题讨论】：

我不确定我是否理解您的问题。为什么不直接做 <Modal ...><li>...</li></Modal> 呢？你想把它作为孩子传递，那就去做吧。
将 li 部分分离成一个函数组件，并将其作为子组件渲染给 Model
只需在您的模式中渲染{ props.children }（也可以在一个变量中渲染您的“li”内容，这样您就可以在两个渲染路径中的任何一个中发送它）

标签： javascript reactjs

【解决方案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>
            )}

}

【讨论】：

我想我可能会以某种方式避免代码重复。
只需为列表项创建一个单独的组件

【解决方案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>
        )
    }
}

【讨论】：