Question

我的组件有问题，我需要在 export.data 中从数组中呈现技能元素列表。我想，我错过了地图中的一些论据：

const React = require('react')

class Post extends React.Component {
  render () {
    const { route } = this.props
    const post = route.page.data
    return this.props.route.page.data.skills.map(() => (
      <div>
        <h1>{this.props.route.page.data.title}</h1>
        <ul>
          <li>{this.props.route.page.data.skills}</li>
        </ul>
      </div>
    )
   )
  }
}
Post.propTypes = {
  route: React.PropTypes.object,
}
export default Post

exports.data = {
  title: 'Tech Skills',
  skills: ['One skill', 'Two skill'],
}

Answer 1

map函数中的回调接收迭代元素作为其参数。此外，您的render函数应返回单个容器，其中包含元素列表。所以你需要做这样的事情：

return (
<div>
  {this.props.route.page.data.skills.map((skill) => (
    <div key={skill}>
      <h1>{this.props.route.page.data.title}</h1>
      <ul>
        <li>{skill}</li>
      </ul>
    </div>
  ))}
</div>)

另请注意，您需要为每个<div>提供一个key属性，以避免出现错误。

Answer 2

原因是，您从渲染方法（数组）返回的内容超过一个元素。我们无法返回多个元素，因此请将它们包含在div内。

不要忘记render()基本上是function，函数总是包含许多参数，并且始终只返回一个值。

像这样：

render () { const { route } = this.props; const post = route.page.data; return <div> {this.props.route.page.data.skills.map(el => ( <div> ... </div> ))} </div> ) }

在map正文el内部将是数组的每个object，以使用el.keyName访问任何值。

Answer 3

你需要在地图内接收skill，因为你的地图函数会收到数组的每个元素。

您可以获取地图收到的技能对象中每个元素的信息。

此外，使用您的代码时，请注意您将为要打印的每个元素显示<h1>标题。你应该这样做：

return (
   <div>
       <h1>{this.props.route.page.data.title}</h1>
       <ul>
           {
             this.props.route.page.data.skills.map((skill) => {
               return <li key={skill.id}>{skill}</li>
             })
           }
       </ul>
   </div>
)

在这里，您只会显示一次标题，之后您将创建每项技能列表的元素。还要记住，如果要在地图或任何迭代函数中创建JSX元素，则需要key参数，因为React使用此键来更好地优化组件的重新呈现

希望它有所帮助！

在React中渲染数组元素

3 个答案: