【发布时间】:2018-02-07 13:31:07
【问题描述】:
我正在尝试呈现一个选择,并希望能够做这样的事情来添加选项:
<Field component={RenderSelect} name="subjects" label="Subjects">
<option value="maths">Maths</option>
<option value="english">English</option>
</Field>
我有一个 createRenderer 函数:
const createRenderer = render => ({input, name, label, children}) => {
return (
<div key={name}>
<label htmlFor={name}>{label}</label>
{render(input, name, children)}
</div>
)
},
我的 RenderSelect 看起来像这样:
const RenderSelect = createRenderer((input, name, label, children) => {
return (
<select name={name} {...input}>
{children}
</select>
)
})
我的印象是,我可以像对 input、name、label 等所做的那样,从字段中解构 children 道具,尽管这似乎不起作用。当我运行代码时,我的选择中没有出现任何选项,并且对 DOM 的检查确认没有选项。任何帮助将不胜感激。提前致谢!
【问题讨论】:
-
你不能只使用默认的“选择”吗?据我所知,它会做你想做的一切。 - redux-form.com/6.5.0/examples/simple
-
嗯,问题是,这只是一个简单的例子。将来,我将对其进行扩展,事情会变得更加复杂,因此我将需要一个自定义选择组件。确实,在我在帖子中写的示例中,使用 Field 而不是 select 的唯一好处是我不必为标签编写样板文件,但将来可能会改变。此外,我确信知道如何从我的领域传递孩子也会对其他事情有用。
-
您应该能够将名为 children 的 prop 传递给 Field,然后它将传递给 renderSelect。见#3 - redux-form.com/6.0.0-alpha.4/docs/api/field.md
-
你是什么意思?就是这样吗?
<Field component={RenderSelect} children name="subjects" label="Subjects"> //Options here </Field>?那没用。 -
children={}其中{}是要传递给renderSelect 的子对象(在您的情况下为JSX)。我还没有机会测试这个,现在把它拉起来。但这就是文档所说的
标签: reactjs redux redux-form children