Когда работаешь с React, ты не можешь использовать интерполяцию переменных прямо внутри кавычек атрибута так, как ты это делаешь в обычных шаблонных строках. JSX требует другого подхода.
Следующий синтаксис не будет работать как ожидается:
<img className='image' src='images/{this.props.image}' />
Интерполяция строк внутри значений атрибутов в кавычках не поддерживается в JSX.
Чтобы получить доступ к props в атрибутах, нужно использовать фигурные скобки для вычисления JavaScript-выражений как значения атрибута.
<img className='image' src={'images/' + this.props.image} />
<img className='image' src={`images/${this.props.image}`} />
Ключевое отличие в том, что при использовании динамических значений в JSX-атрибутах всё значение атрибута должно быть обёрнуто в фигурные скобки {}. Это сигнализирует JSX, что ты передаёшь JavaScript-выражение, а не статическую строку.
Шаблонные строки — предпочтительный подход в современной разработке на React, так как они дают более чистый и читаемый синтаксис при подстановке переменных в строки.
Оба варианта src={'images/' + this.props.image} и src={images/${this.props.image}} — это правильные способы получения доступа к props в JSX атрибутах, хотя один синтаксис предпочтителен для читаемости.
Новый — ещё не проверен сообществом
Вы