จะสร้าง href แบบไดนามิกในฟังก์ชัน render render ได้อย่างไร?

ฉันกำลังแสดงรายการโพสต์ สำหรับแต่ละโพสต์ฉันต้องการแสดงผลแท็กจุดยึดที่มีรหัสโพสต์เป็นส่วนหนึ่งของสตริง 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/2etc?

ใช้การต่อสายอักขระ:

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

ไวยากรณ์ JSX อนุญาตให้ใช้สตริงหรือนิพจน์({...})เป็นค่า คุณไม่สามารถผสมทั้งสองอย่างได้ ภายในนิพจน์คุณสามารถใช้นิพจน์ JavaScript ใดก็ได้ตามที่ชื่อแนะนำเพื่อคำนวณค่า

คุณสามารถใช้ไวยากรณ์ backtick 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>