使用单独的组件

Question

我正在尝试创建包含SelectInput的ReferenceInput。

以下代码完美运行（请关注ReferenceInput）

但是，我想将它分成另一个组件并将数据作为道具传递。我这样做了。

运行时，会发生此错误

在这个文件中 https://github.com/marmelab/admin-on-rest/blob/49a616c93d1ee5ea0bfa3c5f7abea0bb29c8d01c/src/mui/input/ReferenceInput.js#L243

我做错了什么？

由于

Answer 1

输入组件使用Redux-Form实际呈现表单并将应用程序状态连接到输入组件。

输入道具在后台由ReferenceInput传递给它的子节点。

如果您想创建孩子，那么您需要执行以下操作。这是我的应用程序的代码，但我相信你会看到这种模式。

const TaleGenreInput = ({style, text, ...props}) => {
  return (
    <div style={style.container} >
      <span style={style.span}>{text}:&nbsp;</span>
      <ReferenceInput {...props} reference="genres" >
        <GenreInputGroup {...props} style={style} elStyle={style.elStyle} optionText='name' />
      </ReferenceInput>
    </div>
  )
}

const GenreInputGroup = ({style, elStyle, optionText, ...rest}) => {
  return (
    <div>
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
    </div>
  )
}

{... rest}确保从父级传递的所有道具都进入SelectInput。您还可以控制日志记录其值以查看它包含的所有内容。通过调试帮助很多。