在 JSX 中，如何将 className 设置为 string + {prop}答案

【问题标题】：In JSX how do I set a className as string + {prop}在 JSX 中，如何将 className 设置为 string + {prop}
【发布时间】：2016-05-10 23:25:52
【问题描述】：

我对 React 有点陌生，并试图将 className 设置为 string + prop。但我不确定该怎么做以及这是否是最佳做法。

所以我正在尝试做的事情，显然不起作用，是这样的：

<a data-featherlight='string' + {this.props.data.imageUrl}>

我该如何写这篇文章？

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以使用字符串连接

<a data-featherlight={'string' + this.props.data.imageUrl}>

或使用Template strings 新的 ES2015 功能

<a data-featherlight={ `string${this.props.data.imageUrl}` }>

【讨论】：

我想将 fontawesome 字符串从 fa 和 Twitter 连接到 icon={faTwitter}。但是这不接受string，因为它是IconProp 类型。我们如何克服这个问题？

【解决方案2】：

你也可以试试：

<a data-featherlight={'string1' + this.props.data.imageUrl + 'string2'}>

或

<a data-featherlight={ `string1 ${this.props.data.imageUrl} string2` }>

如果您使用的是 Link 组件，那么您可以像这样连接：

<Link to={`getting-started/${this.props.message}`}>
     <h1>Under {this.props.message}/-</h1>
</Link>

【讨论】：

【解决方案3】：

据我所知，首先：

<a data-featherlight={'your string' + this.props.data.imageUrl}>

第二：

<a data-featherlight={`your string ${this.props.data.imageUrl}`}>

【讨论】：