Как создать динамический 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т.д.?

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

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

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

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

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

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

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

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

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

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

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

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

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

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