2

因此，我们从 material.ui 中实现了 Modal，并尝试根据作为 props 传入的内容在 modal 中安装不同的组件。执行此操作后，我们收到错误消息“无法为函数组件提供参考。尝试访问此参考将失败。您的意思是使用 React.forwardRef() 吗？”。

我们试图了解如何使用 React.forwardRef() - 例如，我们已经阅读了这个线程（我如何在 React 中使用 forwardRef()？） - 但无法真正理解如何在我们的具体代码。

非常感谢我们如何实现 React.forwardRef() 以消除错误的帮助。

这是我们的代码（模态）

const useStyles = makeStyles(() => ({
  backdropModal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}))

const ModalContainer = ({ component, editMode, setEditMode }) => {
  const classes = useStyles()

  return (
    <Modal
      open={editMode}
      onBackdropClick={() => setEditMode(false)}
      className={classes.backdropModal}
    >
      {component}
    </Modal>
  )
}

这是我们安装 Modal 的地方

      <ModalContainer 
        editMode={editMode}
        setEditMode={setEditMode}
        component={
          <EditTask
            item={item} 
            setEditMode={setEditMode}
          />
        }
      />

这是 EditTask 组件

    <EditTaskForm>
      <SubContainer>
        <InputField 
          id="input-task-title"
          label="Task title"
          type="text" 
          value={taskTitle} 
          handleChange={setTaskTitle} 
        />
        <InputField 
          id="input-task-description"
          label="Description"
          type="text" 
          multiline={true}
          value={taskDesc} 
          handleChange={setTaskDesc} 
        />
        <InputField 
          id="input-task-comments"
          label="Comments"
          type="text" 
          multiline={true}
          value={taskComments} 
          handleChange={setTaskComments} 
        />
      </SubContainer>
      <ButtonsContainer>
        <SaveButton 
          type="button"
          onClick={handleFormSubmit}
        >
          SAVE
        </SaveButton>
        <CancelButton onClick={() => setEditMode(false)}>CANCEL</CancelButton>
      </ButtonsContainer>
    </EditTaskForm>
4

0 回答 0