Trong JSX, tôi làm cách nào để đặt tên className là string + {prop}

Tôi hơi mới làm quen với React và đang cố gắng đặt className dưới dạng string + prop. Nhưng tôi không chắc phải làm như thế nào và đó có phải là cách thực hành tốt nhất hay không.

Vì vậy, những gì tôi đang cố gắng làm, và rõ ràng là nó không hoạt động, là:

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

Tôi sẽ viết nó như thế nào?

Bạn có thể sử dụng nối chuỗi

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

hoặc sử dụng Template stringstính năng ES2015 mới

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

Bạn cũng có thể thử nó:

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

hoặc là

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

Nếu bạn đang sử dụng thành phần Liên kết thì bạn có thể nối như thế này:

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

Theo như tôi biết, đầu tiên:

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

Thứ hai:

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

Trong JSX, đối với nối className, bạn nên có chuỗi và đạo cụ của mình ở giữa dấu ngoặc nhọn "{}", vì dấu ngoặc nhọn biểu thị JSX để đánh giá bất kỳ thứ gì bên trong từ quan điểm JS. Vì vậy, bạn nên thử

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