Làm thế nào để tạo href động trong chức năng kết xuất phản ứng?

105

Tôi đang hiển thị một danh sách các bài viết. Đối với mỗi bài đăng, tôi muốn hiển thị một thẻ liên kết với id bài đăng như một phần của chuỗi 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>
    );

Làm cách nào để làm điều đó để mỗi bài đăng có href /posts/1, /posts/2v.v.?

javascript reactjs

— Connor Leech
nguồn

192

Sử dụng nối chuỗi:

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

Cú pháp JSX cho phép sử dụng chuỗi hoặc biểu thức ({...})làm giá trị. Bạn không thể kết hợp cả hai. Bên trong một biểu thức, như tên cho thấy, bạn có thể sử dụng bất kỳ biểu thức JavaScript nào để tính giá trị.

— Felix Kling
nguồn

1

rất hợp lý. Cảm ơn!

— Connor Leech,

1

hoạt động tuyệt vời, nhưng nếu bạn đang sử dụng trình biên dịch như babel, thì chuỗi mẫu sẽ thanh lịch hơn.

— HussienK

nếu nó là một mailto thì sao?

— highgirltaadaa

@tallgirltaadaa: không khác biệt. JSX / JavaScript không quan tâm đến giá trị thực của chuỗi.

— Felix Kling

87

Bạn cũng có thể sử dụng cú pháp backtick ES6

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

Thông tin thêm về các ký tự mẫu es6

— Nath
nguồn

để điều này hoạt động có cần thiết phải sử dụng `và không '?

— Joe Lloyd

3

Có, backtick là một cú pháp es6 mới cho phép nội suy chuỗi, Đã cập nhật câu trả lời của tôi bằng một liên kết

— Nath

2

Ngoài câu trả lời của Felix,

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

cũng sẽ hoạt động tốt. Điều này thật tuyệt vì tất cả đều nằm trong một chuỗi.

— người da đen
nguồn

0

Bạn có thể vui lòng thử cái này không?

Tạo một mục khác trong bài đăng, chẳng hạn như post.link sau đó gán liên kết cho nó trước khi gửi bài đăng đến chức năng kết xuất.

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

Vì vậy, thay vào đó, hàm render ở trên sẽ theo sau.

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

— Khachornchit Songsaen
nguồn