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

我对 React 有点新，试图将 className 设置为 string + prop。但我不确定如何去做，也不知道这是否是最佳实践。

所以我想做的，显然没有用，是这样的:

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

我该怎么写呢？

114232 次浏览

小开

最佳答案

You can use string concatenation

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

or use Template strings new ES2015 feature

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

小开

You can also try it:

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

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

If you are using Link component then you can concatenation like this:

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

小开

As far as I know, first:

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

Second:

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