Question

我该如何将组件从父级传递给孩子，以及子级将道具传递给组件？如何在子组件中传递onCloseModal？我的createComponent是动态的，createProduct，createCategory，这就是为什么我必须这样做。

父组件

export class ProductList extends Component {
  return (
     <PageList
        createComponent={<CreateProduct/>}
      />
  )
}

子组件

export class ProductList extends Component {
  onCloseModal = () = {}
  return (
    <Modal open={open} onClose={this.onCloseModal} >
      {/* <CreateProduct onCloseModal={this.onCloseModal}/> */}
      { this.props.createComponent } // how to pass in closeModal function?
    </Modal>
  )
}

Answer 1

让我在这里写下答案。

父组件

export class ProductList extends Component {
  return (
     <PageList
        createComponent={<CreateProduct/>}
      />
  )
}

子组件

export class ProductList extends Component {
  onCloseModal = () = {}
  return (
    <Modal open={open} onClose={this.onCloseModal} >
      { React.cloneElement(this.props.createComponent, { onCloseModal: this.onCloseModal }) }
    </Modal>
  )
}

如何将组件从父级传递到chlid，子级将字段传递给组件？

1 个答案: