- JSX가 올바르게 렌더링되지 않습니까?

Question

단순히 <p> 태그의 목록을 출력하고 싶지만 올바른 구문을 모르십시오.

데이터가 this.props.bookmarks.bookmarks에 올바르게 저장되었지만 데이터를 올바르게 렌더링하는 방법을 찾을 수 없음을 확인했습니다.

bookmark.title 속성이 있는지 확인했습니다. 반작용 구성 요소 render() 함수와

I는 다음과 같습니다

return (

// ... snip 

this.props.bookmarks.bookmarks.map((bookmark) => { 
    return "<p>{bookmark.title}</p>"; 
}); 

// ... snipt 

) 

업데이트 :

var titles = this.props.bookmarks.bookmarks.map((bookmark) => { 

    return <div className='bookmark_div' id='generated1'> 
    <img className='bookmark_image' id='generated2' src='http://arcmarks.com/_images/sv_favicon.svg'/> 
    <a className='bookmark_link' id='generated3'>arcmarks</a> 
    </div> 

}); 

Answer 1

당신이 가정 설치 바벨 (또는 다른 transpiler)이 올바르게 :

return <p>{bookmark.title}</p>; 

가 작동해야합니다 (" s).

이 컴파일하기 : JS 결과 출력의

React.createElement('p', null, bookmark.title); 

(비슷한라도).

당신이 HTML의 여러 라인, ()들에 JSX 포장 렌더링 할 경우, 키에 대한 경고/오류가 발생하는 것입니다 반응

이 방식으로 반복 가능한 출력하는 경우

return (
<div> 
    <p>content here</p> 
</div> 
) 

Answer 2

, 그래서 당신은 또한 유일한 식별자를 첨부해야합니다. React는 이러한 키를 사용하여 DOM 업데이트를 모니터링하면서 렌더링을 최적화합니다. 당신은 당신이를 더 최적화 할 수 반복자를 북마크를 destructuring에 의해 {}

return (
    // ... snip 

    {this.props.bookmarks.bookmarks.map((bookmark) => { 
    return <p key={bookmark.id}>{bookmark.title}</p>; 
    });} 

    // ... snip 
) 

에 포장, 및 암시 적 수익을 활용해야 할 수 있도록이 보이는

는 다른 JSX 코드 내부에 포함됩니다 : 내 예에서

const { bookmarks } = this.props.bookmarks 

return (
    // ... snip 

    {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 

    // ... snip 
) 

, bookmark.id는 오랫동안 고유의로, 심지어 bookmark.title 아무것도 될 수 있습니다. 당신이 렌더링 할 때, 당신은 항상 부모 요소에 포장해야한다

constructor(props) { 
    super(props) 
    // set initial button state to false 
    this.state = { 
    buttonClicked: false 
    } 
} 

// method to handle button clicking 
handleButton(e) { 
    e.preventDefault() 
    console.log('Radical button firing.') 
    // set state to opposite of current 
    this.setState({ buttonClicked: !this.state.buttonClicked }) 
} 

render() { 
    if (!this.props.bookmarks) return <div>Loading...</div> 

    const { bookmarks } = this.props.bookmarks 

    return (
    <div> 
     <h3>Checkout my Rad Books</h3> 

     {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 

     <button onClick={(e) => this.handleButton(e)}>{(!this.state.buttonClicked) ? 'Not Clicked Yet' : 'Was Clicked'}</button> 
    </div> 
) 
} 

: 당신이 그것을 볼 수 있도록

난 그냥 몇 가지 추가 JSX/HTML 내부에서이 문제를 보여주는 예제를 추가 할 것입니다, 완전한 원을 올 이 경우 div를 사용했습니다. 여기에는 부유 한 데이터가 포함되어있어 법의학 분석과 테스트를 더 진행할 수 있습니다.

여기에 모두 나와 있습니다. 우리는 또한 렌더링 방법으로 그 도서 목록을 뽑을 수 :

renderBooks() { 
    if (!this.props.bookmarks.bookmarks) return <div>Loading bookmarks...</div> 

    const { bookmarks } = this.props.bookmarks 

    return (
    <div> 
     {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 
    </div> 
) 
} 

render() { 
    return (
    <div> 
     <h3>Checkout my Rad Books</h3> 

     {this.renderBooks()} 

     <button onClick={(e) => this.handleButton(e)}>{(!this.state.buttonClicked) ? 'Not Clicked Yet' : 'Was Clicked'}</button> 
    </div> 
) 
} 

Answer 3

return "<p>{bookmark.title}</p>"; 

당신은 보간을 시도 할 것으로 보인다. 그것을 보간 할 필요는 없습니다.

return <p>{bookmark.title}</p> should be good. 

ES6을 사용하는 경우 백틱을 사용하여 보간 할 수 있습니다.

`My name is ${name}`