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

Question

我对React有点新，并尝试将className设置为string + prop。但我不知道该怎么做以及这是否是最好的做法。

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

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

我将如何写这篇文章？

Answer 1

您可以使用字符串连接

2.0000006103516

或使用Template strings新的ES2015功能

1 write / 1 second minimun and 

1 write / 30 minutes maximum.

Answer 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>

Answer 3

据我所知，首先：

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

第二：

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

Answer 4

在JSX中，对于className串联，您应该在大括号“ {}”之间放置字符串和道具，因为大括号表示JSX从JS角度评估内部内容。所以你应该尝试

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