리액트 렌더 함수에서 동적 href를 생성하는 방법

리액트 렌더 함수에서 동적 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 backtick 구문도 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/31567729/how-to-create-dynamic-href-in-react-render-function