Question

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

我确认数据已正确存储在this.props.bookmarks.bookmarks中，但无法弄清楚如何正确呈现数据。

我确认也有bookmark.title属性。

在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

如果以这种方式输出iterable，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>
  )
}

Answer 2

假设您正确设置了Babel（或其他一些转换程序）：

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

应该有效（没有" s）。

这将编译为：

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

生成的JS输出中的

（或类似的东西）。

如果要渲染多行HTML，请将您的JSX包装在() s：

中

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

Answer 3

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

您似乎正在尝试插值。你不应该插入它。

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

如果您使用的是ES6，则可以使用反引号进行插值。

`My name is ${name}`

--JSX似乎无法正确呈现？

3 个答案: