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

Posted 2023-02-22

【中文标题】如何将一个道具作为变量传递给 React 中的另一个道具？

【英文标题】：How to pass one prop as a variable to another prop in React?

【发布时间】：2019-12-14 08:58:33

【问题描述】：

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

所以在父组件中，我使用两个道具“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'
/>
)

【参考方案1】：

我认为你需要这样做

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

希望这会有所帮助。

【讨论】：

哇它好用！非常感谢你的帮助！我可以知道它背后的理论是什么以及为什么我不能使用$吗？非常感谢！！

我刚刚编辑了答案，更新的是适合你的还是旧的？

className=props.formProps.errors[props.name] && props.formProps.touched[props.name] ? 'is-invalid form-control' : 'form-control' 我正在使用这个，它可以工作。我可以知道另一个是什么吗？

访问对象时，您通过 [property name] 中的属性名称来访问对象中所述属性的值。希望这是有道理的。

非常感谢！我可以知道为什么我不能使用这个模板字符串'$'吗？