reactjs - 将额外的 props 传递给 FieldArray 中包装的组件 (React)

Question

我有一个 redux 表单，其中除其他外，还有一个 FieldArray。 我将一个数组作为 name 传递，并指向一个在类主体之外定义的组件，作为 component。非常简化:

...
return(
   <>
      <FieldArray name={myArray} component={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)，因为它们来自翻译文件。

现在，看看 documentation ，我可以看到他们提到了“props”参数。我在线尝试了一些东西:

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

但我似乎无法实际将任何内容传递给 FieldArray(或至少在另一侧检索它)。 我看到了一些现有的问题，但焦点似乎有点不同。

有人有这方面的经验或建议吗？谢谢:)

Answer 1

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

例如这段代码是:

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;
}