Question

我有一个带有消息字段的横幅组件-在这种情况下为欢迎消息。

其中一个道具称为'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'

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

Answer 1

为什么不只使用占位符，在渲染时将替换占位符？

userName: 'Joe',
headline: 'Hi {userName}, welcome to your account'

在render()

中

return <div>
  <div className="headline">
      {this.props.headline.replace('{userName}', this.props.userName)}
  </div>
</div>;

Answer 2

您应该可以像这样使用ES6 Template literals：

const username = 'Joe';

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

react中对es6 object shorthand的支持仍然不完善，因此您暂时无法将其用于用户名。

在另一个prop reactJS中使用prop值

2 个答案: