传递道具以使用字符串值

Question

我有以下功能组件和解构参数道具：

const MyTimes = ({ myWindowGroup, name, fieldArrayName }) => (

    <FieldArray 
    name={name}
    render={(arrayHelpers) => (
      <React.Fragment>
            {myWindowGroup.fieldArrayName.map((myTime, index) => (

并且我使用以下道具调用组件：

    <MyTimes
       myWindowGroup={myWindowGroup}
       fieldArrayName={"myTimes"}
       name={`myWindowGroups.${index}.myTimes`}
    />

我的问题是因为我是 React 的新手，也就是说，我如何 pass/use myTimes 的 fieldArrayName={"myTimes"} 字符串值进入 MyTime 上面的组件，这样我就可以将 fieldArrayName.map 的值替换为 myTimes.map ?

我已经按原样试过了，还是不行。

Answer 1

你可以做到

{myWindowGroup[fieldArrayName].map((myTime, index) => (

Answer 2

使用动态键。参见 Bracket Notation。

myWindowGroup[fieldArrayName].map(....

const myWindowGroup = {
  myTimes: ['This is the value array you want'],
  foo: [],
};

console.log(myWindowGroup['myTimes']);
console.log(myWindowGroup['foo']);

Answer 3

我对你的问题理解正确，你可以通过以下

获得所需的输出

const MyTimes = ({ myWindowGroup, name, fieldArrayName }) => (

    <FieldArray 
    name={name}
    render={(arrayHelpers) => (
      <React.Fragment>
            {myWindowGroup[fieldArrayName].map((myTime, index) => (
             // your logic here
        ))}

传递道具以使用字符串值

Passing props inorder to use the string value

javascript

reactjs

react-props