Question

我有一个redux表单，其中有一个FieldArray。我将数组传递为name，并指向在类主体外部定义的组件，称为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）的“内容”字段，因为它们来自翻译文件。

现在，看着documentation，我可以看到他们提到了一个'props'参数。我尝试了一些方法：

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

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

有人有经验或任何建议吗？谢谢：）

Answer 1

在创建具有反应的功能组件时，您的组件接受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;
}

Answer 2

您应该将对象传递到props，它将与emails组件的props合并，因此，如果您想使用myDictionary命名为prop的对象来获取对象，则需要传递这样的对象

props={{ myDictionary: { test: 'test' } }}

您将获得

const emails = ({ fields, myDictionary }) => (

类似这样的东西：

return(
   <>
      <FieldArray name={myArray} component={emails} props={{ myDictionary: myDictionary }} />
   </>
)

const emails = ({ fields, myDictionary }) => (
    <>
        <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={myDictionary.test}/>
                        </Table.Cell>

                    </Table.Row>
                ))}
            </Table.Body>
          </Table>
        <Button content={myDictionary.test} />
    </>
);

将额外的道具传递给包装在FieldArray中的组件（反应）

2 个答案: