반응 렌더링 기능에서 동적 href를 만드는 방법은 무엇입니까?

게시물 목록을 렌더링하고 있습니다. 각 게시물에 대해 href 문자열의 일부로 게시물 ID를 사용하여 앵커 태그를 렌더링하고 싶습니다.

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등?

문자열 연결 사용 :

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

JSX 구문을 사용하면 문자열 또는 표현식 ({...})을 값 으로 사용할 수 있습니다 . 둘 다 섞을 수는 없습니다. 표현식 내에서 이름에서 알 수 있듯이 JavaScript 표현식을 사용하여 값을 계산할 수 있습니다.

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>