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

Question

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

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

657 3

javascript reactjs

3 ответов:

Comments

Ничего не найдено.

Felix Kling · Accepted Answer · 2015-07-22 18:39:27

использовать конкатенацию строк:
href={'/posts/' + post.id}
синтаксис JSX позволяет использовать строки или выражения ({...}) в качестве значений. Вы не можете смешать оба. Внутри выражения вы можете, как следует из названия, использовать любое выражение JavaScript для вычисления значения.

Nath · Accepted Answer · 2016-05-26 17:49:25

вы можете использовать синтаксис ES6 backtick тоже
<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>
дополнительная информация о литералах шаблона es6

Kajornjit Songsaen · Accepted Answer · 2017-11-19 15:06:18

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

создайте еще один элемент в сообщении, например пост.ссылка затем назначьте ссылку на него перед отправкой post функции render.
post.link = '/posts/+ id.toString();
таким образом, вышеуказанная функция рендеринга должна быть следующей.
return <li key={post.id}><a href={post.link}>{post.title}</a></li>