如何将动态道具传递给ReactJS中的子组件？

Question

我在两个组件之间进行动态切换，如下所示：

{this.props.firstname ? (

    <ProfileDropdown
        firstname = "SomeFirstName"
    />

) : (
     ....
)}

但是，而不是"SomeFirstName" ，我想通过this.props.firstname作为值firstname丙到<ProfileDropdown />组分。 我怎么做？

Answer 1

基本规则 ：

我们可以通过将花括号括起来将任何JavaScript表达式嵌入JSX中。

要在JSX中指定任何表达式，我们需要使用{} ，并在其中放入this.props.firstName 。

像这样写：

<ProfileDropdown
     firstname = {this.props.firstname}
/>

检查DOC： 在JSX中嵌入表达式

更新：

查看此示例，您将有一个更好的主意：

{this.props.firstname ? (         //expression so {}
    <ProfileDropdown              //jsx
        firstname = {1 == 1 ?     //here {} to put expression inside JSX
            <div> {1+1} </div>    //inside div(JSX), so use {} again to put expression 1+1
            : <div>World</div>
        }
    />
)