Question

我动态切换两个组件，如下所示：

{this.props.firstname ? (

    <ProfileDropdown
        firstname = "SomeFirstName"
    />

) : (
     ....
)}

但是，我希望将"SomeFirstName"作为this.props.firstname道具的值传递给firstname组件，而不是<ProfileDropdown />。我该怎么做？

Answer 1

Basic Rule：

我们可以通过将它包装成卷曲来在JSX中嵌入任何JavaScript expression 括号。

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

像这样写：

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

检查DOC：Embedding Expressions in 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>
        }
    />
)

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

1 个答案: