时间戳

首页 > 解决方案 > 将额外的道具传递给包裹在 FieldArray (React) 中的组件

reactjs - 将额外的道具传递给包裹在 FieldArray (React) 中的组件

问题描述

我有一个 redux 表单，其中除其他外，我有一个FieldArray. 我传递一个数组 asname并指向一个组件，定义在类的主体之外， as component。非常简化：

...
return(
   <>
      <FieldArray name={myArray} component={emails}/>
   </>
)
...

这是emails

const emails = ({ fields }) => (
    <>
        <Table>
            <Table.Body>
                {fields.map((code, index) => (
                    <Table.Row>
                        <Table.Cell>
                            <Field
                                name={code}
                                type="text"
                                component={customInput}
                                autoFocus
                            />
                        </Table.Cell>
                        <Table.Cell>
                            <Button content='XXXXX'/>
                        </Table.Cell>

                    </Table.Row>
                ))}
            </Table.Body>
          </Table>
        <Button content='XXXXX' />
    </>
);

我想做的是将字典传递给“电子邮件”以填充按钮的“内容”字段（现在为 XXXXX），因为它们来自翻译文件。

现在，查看文档，我可以看到他们提到了一个“道具”参数。我在网上尝试了一些东西：

<FieldArray name={myArray} component={emails} props={myDictionary}/>

但我似乎无法真正将任何东西传递给 FieldArray （或者至少在另一边检索它）。我已经看到了一些现有的问题，但重点似乎有点不同。

有没有人有这方面的经验或任何建议？谢谢 ：）

标签： reactjsredux-formreact-props

解决方案

当您使用 react 创建功能组件时，您的组件接受道具作为参数。

例如这段代码是：

const emails = ({ fields }) => {
    // do something with fields
    return <div></div>
}

等价于：

const emails = (props) => {
    const {fields} = props;
    // do something with fields
    return <div></div>
}

因此，如果你像这样通过它

<FieldArray name={myArray} component={emails} myDictionary={myDictionary}/>

您将能够像这样访问它：

const FieldArray = (props) =>{
    const {myDictionary} = props;
}

推荐阅读