Как создать динамический href в функции рендеринга реакции?

108

Я представляю список сообщений. Для каждого сообщения я хотел бы отобразить тег привязки с идентификатором сообщения как часть строки href.

render: function(){
    return (
        <ul>
            {
                this.props.posts.map(function(post){
                    return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

Как это сделать так , чтобы каждый пост имеет HREF - ые /posts/1, и /posts/2т.д.?

javascript reactjs

— Коннор Лич
источник

193

Используйте конкатенацию строк:

href={'/posts/' + post.id}

Синтаксис JSX позволяет использовать в ({...})качестве значений строки или выражения . Вы не можете смешивать оба. Внутри выражения вы можете, как следует из названия, использовать любое выражение JavaScript для вычисления значения.

— Феликс Клинг
источник

1

очень разумно. Спасибо!

— Connor Leech

1

отлично работает, но если вы используете такой компилятор, как babel, то строки шаблонов будут более элегантными.

— HussienK

что, если это mailto?

— tallgirltaadaa

@tallgirltaadaa: без разницы. JSX / JavaScript не заботится о фактическом значении строки.

— Феликс Клинг

87

Вы также можете использовать синтаксис обратной кавычки ES6

<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>

Дополнительная информация о литералах шаблона es6

— Натх
источник

чтобы это работало, нужно ли использовать "and not"?

— Джо Ллойд

3

Да, обратная кавычка - это новый синтаксис es6 для строковой интерполяции, обновил мой ответ ссылкой

— Nath

2

В дополнение к ответу Феликса,

href={`/posts/${posts.id}`}

тоже будет хорошо работать. Это приятно, потому что все в одной строке.

— талакер
источник

0

Не могли бы вы попробовать это?

Создайте еще один элемент в сообщении, например post.link, затем назначьте ему ссылку перед отправкой сообщения в функцию рендеринга.

post.link = '/posts/+ id.toString();

Таким образом, вместо этого должна выполняться приведенная выше функция рендеринга.

return <li key={post.id}><a href={post.link}>{post.title}</a></li>

— Хачорнчит Сонгсаен
источник