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

Я делаю список сообщений. Для каждого сообщения я хотел бы сделать привязным тегом идентификатор сообщения как часть строки 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 и т.д.?

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Итак, вместо этого должна выполняться следующая функция рендеринга.

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

Ответ 4

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

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

тоже подойдет. Это хорошо, потому что все это в одной строке.