Question

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

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>
        )
    }
}

将props.children传递到有条件渲染的组件

2 个答案: