【问题标题】:Redux-form: Can't get children from Field componentRedux-form:无法从 Field 组件中获取子级
【发布时间】: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>
    )
})

我的印象是,我可以像对 inputnamelabel 等所做的那样,从字段中解构 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
  • 你是什么意思?就是这样吗?&lt;Field component={RenderSelect} children name="subjects" label="Subjects"&gt; //Options here &lt;/Field&gt;?那没用。
  • children={} 其中{} 是要传递给renderSelect 的子对象(在您的情况下为JSX)。我还没有机会测试这个,现在把它拉起来。但这就是文档所说的

标签: reactjs redux redux-form children


【解决方案1】:

你只需要删除你的标签参数

const RenderSelect = createRenderer((input, name, children) => {
    return (
        <select name={name} {...input}>
            {children}
        </select>
    )
});

【讨论】:

  • 我认为你误解了我到底想要什么(也许我的问题不够清楚)。我希望能够指定这样的选项:&lt;Field component={RenderSelect} &gt;//Options&lt;/Field&gt;,而不是&lt;Field component={RenderSelect} someProp={options} /&gt;,因为对我来说第一个语法似乎更自然(更类似于 HTML)。
  • 明白。更新!抱歉跑偏了。你所做的一切都是正确的,你只是传递了一个不需要的参数 :) 它一直盯着我们看!
  • 哦,哇,它有效,哈哈。多谢大佬,帮了大忙了!我会接受你的回答。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-11-23
  • 2021-11-29
  • 2018-08-25
  • 1970-01-01
  • 2019-01-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多