JSX에서 어떻게 className을 string + {prop}로 설정합니까?

나는 React에 조금 익숙하고 className을 string + prop으로 설정하려고합니다. 그러나 나는 그것을하는 방법과 그것이 모범 사례인지 확실하지 않습니다.

그래서 내가하려는 것은 분명히 작동하지 않습니다.

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

이것을 작성하는 방법은 무엇입니까?

문자열 연결을 사용할 수 있습니다.

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

또는 Template strings새로운 ES2015 기능 사용

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

시도해 볼 수도 있습니다.

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

내가 아는 한, 먼저 :

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

둘째:

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

JSX에서 className 연결의 경우 중괄호 "{}"사이에 문자열과 소품이 있어야합니다. 그래서 당신은 시도해야

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