时间戳

首页 > 解决方案 > 从 Modal 中的 props 反应输出组件

reactjs - 从 Modal 中的 props 反应输出组件

问题描述

我正在尝试将组件从父级传递给模态子级。这是正在传递的组件的“路径”：

第一步：

<DataGrid 
    rows = {rows} 
    columns = {columns} 
    addEditForm={<LabourDescAddEditForm row={row} />}
    setRow = {setRow} />

第二步（datagrid内部的modalform）

<ModalForm 
      show={show} 
      title={title}
      addEditForm={props.addEditForm} 
      submitFormEdit={props.submitFormEdit}
      submitFormAdd={props.submitFormAdd}/>

最后一步

function ModalForm(props) {
const [modal, setModal] = useState(false)

useEffect(() => {
setModal(props.show)
console.log(props) 
},[props])

return (
<div>
  <Modal show={modal} onHide={props.handleClose} >
    <Modal.Header closeButton>
      <Modal.Title>{props.title}</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      {props.AddEditForm}
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={props.handleClose}>
        Close
      </Button>
      <Button onClick={props.item ? props.submitFormEdit : props.submitFormAdd}>
        {props.buttonLabel}
      </Button>
    </Modal.Footer>
  </Modal>
  </div>
 )
}

在 console.log(props) 我可以看到组件：

{show: false, title: "", addEditForm: {…}, buttonLabel: "", handleClose: ƒ, …} 
(if i click on extend row)
addEditForm: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
buttonLabel: ""
handleClose: () => setShow(false)
show: false
submitFormAdd: e => {…}
submitFormEdit: e => {…}
title: ""
__proto__: Object
}

但我不明白为什么模态体是空的。我做错了什么？

标签： reactjsreact-nativereact-redux

解决方案

你说

我可以看到组件：addEditForm

你写代码

 {props.AddEditForm}

你有一些错字

推荐阅读