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

Question

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

所以在 parent 组件中我使用传递两个道具 "name" 和 "formProps" 到 child 像这样：

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

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

我想要这样：

当 "name" prop 等于 "id",

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

是

 props.formProps.errors.id

当 "name" prop 等于 "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'}

希望对您有所帮助。

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

How to pass one prop as a variable to another prop in React?

jsx

ecmascript-6

reactjs

react-props