Bagaimana cara membuat href dinamis dalam fungsi render react?

105

Saya sedang merender daftar posting. Untuk setiap posting saya ingin membuat tag anchor dengan id posting sebagai bagian dari string 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>
    );

Bagaimana saya melakukannya sehingga setiap posting memiliki href /posts/1, /posts/2dll?

javascript reactjs

— Connor Leech
sumber

192

Gunakan penggabungan string:

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

Sintaks JSX memungkinkan penggunaan string atau ekspresi ({...})sebagai nilai. Anda tidak bisa mencampur keduanya. Di dalam ekspresi Anda dapat, seperti namanya, menggunakan ekspresi JavaScript apa pun untuk menghitung nilainya.

— Felix Kling
sumber

1

sangat masuk akal. Terima kasih!

— Connor Leech

1

berfungsi dengan baik, tetapi jika Anda menggunakan kompiler seperti babel, maka string template lebih elegan.

— HussienK

bagaimana jika itu mailto?

— tallgirltaadaa

@tallgirltaadaa: tidak ada perbedaan. JSX / JavaScript tidak peduli dengan nilai sebenarnya dari string tersebut.

— Felix Kling

87

Anda juga dapat menggunakan sintaks backtick ES6

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

Info lebih lanjut tentang literal template es6

— Nath
sumber

agar ini berhasil, apakah perlu menggunakan 'dan tidak'?

— Joe Lloyd

3

Ya backtick adalah sintaks es6 baru untuk interpolasi string, Memperbarui jawaban saya dengan tautan

— Nath

2

Selain jawaban Felix,

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

akan bekerja dengan baik juga. Ini bagus karena semuanya dalam satu string.

— thalacker
sumber

0

Bisakah Anda mencobanya?

Buat item lain dalam posting seperti post.link lalu tetapkan link ke item tersebut sebelum mengirim posting ke fungsi render.

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

Jadi, fungsi render di atas seharusnya mengikuti.

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

— Khachornchit Songsaen
sumber