javascript - --JSX 似乎无法正确渲染？

Question

我想简单地输出 <p> 的列表标签但不知道正确的语法。

我验证了数据是否正确存储在 this.props.bookmarks.bookmarks 中但无法弄清楚如何正确渲染它。

我验证了有一个 bookmark.title还有属性(property)。

React组件中的render()我的功能如下:

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

如果您以这种方式输出可迭代对象，React 将抛出有关键的警告/错误，因此您还应该附加一个唯一标识符。 React 在监视 DOM 更新时使用这些键来帮助优化渲染。

看起来这也嵌入到其他 JSX 代码中，因此您可能需要将其包装在 {}

return (
  // ... snip

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

  // ... snip
)

您还可以通过解构可迭代的书签并利用隐式返回来进一步优化:

const { bookmarks } = this.props.bookmarks

return (
  // ... snip

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

  // ... snip
)

在我的示例中，bookmark.id 可以是任何内容，只要它是唯一的，甚至是 bookmark.title。

为了回到原点，我将添加一个示例，在一些附加的 JSX/HTML 中显示这一点，以便您可以看到它:

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

渲染时，必须始终包裹在父元素中，在本例中，我们使用了 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>
  )
}