时间戳

首页 > 解决方案 > 在另一个 prop reactJS 中使用 prop 值

reactjs - 在另一个 prop reactJS 中使用 prop 值

问题描述

我有一个带有消息字段的横幅组件 - 在本例中是欢迎消息。

其中一个道具称为'headline'，您可以在其中输入您的消息。目前我正在使用消息“嗨乔，欢迎使用您的帐户”，但我想从另一个道具中提取名称。

这是我目前在 ReactDOM.render 中的内容：

ReactDOM.render(React.createElement(PriorityComponents.HeaderBanner, {
      desktopImage:{},
      mobImage:{},
      altText:'alt test goes here',
      isLeftAligned:true,
      userName: 'Joe',
      headline: 'Hi Joe, welcome to your account',
      label: ''
    }), document.getElementById("HeaderBanner"));

标题调用如下：

<Editable tag="h1" className="headerBanner__body__headline" html={article.headline} />

我想我也许可以使用以下内容：
userName: 'Joe', headline: 'Hi ' + userName + ', welcome to your account'

这似乎破坏了组件！知道如何在标题道具中引用用户名吗？

标签： reactjs

解决方案

您应该能够像这样使用ES6 模板文字： 

const username = 'Joe';

// While sending props
username: {username} 
headline: {`Hi ${username}, welcome to your account`}

react 中对es6 对象简写的支持仍然是 wip，所以你还不能将它用于用户名。

推荐阅读