如何将一个道具作为变量传递给 React 中的另一个道具？

Question

我可以知道如何将一个道具作为变量传递给另一个传递给子组件的道具吗？

所以在父组件中，我使用两个道具“name”和“formProps”传递给这样的孩子：

<FormField name="id" formProps={formProps} />
<FormField name="amount" formProps={formProps} />

在子组件的 className 中，我想将 {props.name} 作为 {props.formprops.errors} 的变量，但我不知道该怎么做。

我希望它是这样的：

当“name”属性等于“id”时，

props.formProps.errors.`${props.name}` 

是

 props.formProps.errors.id

当“name”属性等于“amount”时，

props.formProps.errors.`${props.name}`

是

 props.formProps.errors.amount

但是有错误。我可以知道我应该怎么写吗？非常感谢！

const FormField = (props) => {
return (
......
<Field
   type="text"
   name={props.name}

   className={props.formProps.errors.`${props.name}` && props.formProps.touched.`${props.name}` ? 'is-invalid form-control' : 'form-control'}
/>
)
}

Answer 1

我认为你需要这样做

className={props.formProps.errors[props.name] && props.formProps.touched[props.name] ? 'is-invalid form-control' : 'form-control'}

希望这会有所帮助。