React render fonksiyonunda dinamik href nasıl oluşturulur?

105

Bir gönderi listesi oluşturuyorum. Her gönderi için href dizesinin bir parçası olarak gönderi kimliğiyle bir bağlantı etiketi oluşturmak istiyorum.

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>
    );

Nasıl her sonrası href 's vardır ki yapacağız /posts/1, /posts/2vs?

javascript reactjs

— Connor Leech
kaynak

192

Dize birleştirme kullanın:

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

JSX sözdizimi, dizelerin veya ifadelerin ({...})değer olarak kullanılmasına izin verir . İkisini de karıştıramazsınız. Bir ifadenin içinde, adından da anlaşılacağı gibi, değeri hesaplamak için herhangi bir JavaScript ifadesini kullanabilirsiniz.

— Felix Kling
kaynak

1

çok mantıklı. Teşekkürler!

— Connor Leech

1

harika çalışıyor, ancak babel gibi bir derleyici kullanıyorsanız, şablon dizeleri daha zariftir.

— HussienK

Ya bir mailto ise?

— tallgirltaadaa

@tallgirltaadaa: fark yok. JSX / JavaScript, dizenin gerçek değerini önemsemez.

— Felix Kling

87

ES6 backtick sözdizimini de kullanabilirsiniz

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

Es6 şablon değişmezleri hakkında daha fazla bilgi

— Nath
kaynak

bunun işe yaraması için kullanmak gerekli mi değil mi?

— Joe Lloyd

3

Evet, arka işaret, dize enterpolasyonu için yeni bir es6 sözdizimidir, Cevabım bir bağlantıyla güncellendi

— Nath,

2

Felix'in cevabına ek olarak,

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

çok iyi çalışır. Bu güzel çünkü hepsi tek bir dizede.

— thalacker
kaynak

0

Lütfen bunu deneyebilir misin?

Post.link gibi bir postada başka bir öğe oluşturun ve ardından render işlevine postayı göndermeden önce bağlantıyı ona atayın .

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

Bu nedenle, yukarıdaki render işlevi yerine aşağıdaki olmalıdır.

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

— Khachornchit Songsaen
kaynak