Як створити динамічний href у функції реагування візуалізації?

105

Я переглядаю список публікацій. Для кожної публікації я хотів би зробити тег прив’язки з ідентифікатором публікації як частини рядка 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

— Коннор П’явка
джерело

192

Використовуйте рядкове з'єднання:

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

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

— Фелікс Клінг
джерело

1

дуже розумний. Дякую!

— Connor Leech

1

чудово працює, але якщо ви використовуєте компілятор, як babel, то рядки шаблону є більш елегантними.

— HussienK

що робити, якщо це поштове повідомлення?

— tallgirltaadaa

@tallgirltaadaa: різниці немає. JSX / JavaScript не переймається фактичним значенням рядка.

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

87

Ви також можете використовувати синтаксис backtick ES6

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

Докладніше про літературу шаблонів es6

— Натх
джерело

для цього потрібно використовувати `і ні '?

— Джо Ллойд

3

Так, backtick - це новий синтаксис es6 для інтерполяції рядків. Оновлено мою відповідь за посиланням

— Nath

2

Окрім відповіді Фелікса,

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

також добре працюватиме. Це приємно, бо все це в одній струні.

— thalacker
джерело

0

Не могли б ви спробувати це?

Створіть ще один елемент у публікації, наприклад post.link, а потім призначте йому посилання, перш ніж надсилати повідомлення функції візуалізації.

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

Отже, наведена вище функція візуалізації повинна бути наступною.

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

— Khachornchit Songsaen
джерело