Arrays React中数组元素的渲染

我的组件有问题，我需要在导出.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'],
}

const React=require（'React'））
类Post扩展了React.Component{
渲染（）{
const{route}=this.props
const post=route.page.data
返回此.props.route.page.data.skills.map（（）=>(
{this.props.route.page.data.title}

{this.props.route.page.data.skills}

)
)
}
}
Post.propTypes={
路由：React.PropTypes.object，
}
导出默认帖子
exports.data={
标题：“技术技能”，
技能：[“一种技能”、“两种技能”]，
}

函数

map

中的回调函数接收迭代元素作为其参数。另外，

render

函数应该返回一个容器，其中包含元素列表。所以你需要这样做：

返回(
{this.props.route.page.data.skills.map（（skill）=>(
{this.props.route.page.data.title}

{skill}

))}
)

---

还请注意，您需要为每个

赋予

键
属性，以避免react中出现错误。
map
函数中的回调函数将迭代元素作为其参数接收。另外，
render
函数应该返回一个容器，其中包含元素列表。所以你需要这样做：

返回(
{this.props.route.page.data.skills.map（（skill）=>(
{this.props.route.page.data.title}

{skill}

))}
)

还请注意，您需要为每个
赋予一个
键
属性，以避免react中出现错误。
原因是，您从render method（一个数组）返回了多个元素。我们无法返回多个元素，因此将它们包装在
div
中

不要忘记，
render（）
基本上是一个
函数
，函数总是接受许多参数，并且总是只返回一个值

像这样：

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

render（）{
const{route}=this.props；
const post=route.page.data；
返回
{this.props.route.page.data.skills.map（el=>(
...
))}
)
}

在
映射
主体内
el
将是数组的每个
对象
，要使用
el访问任何值。keyName
原因是，您从渲染方法（数组）返回了多个元素。我们无法返回多个元素，因此将它们包装在
div
中

不要忘记，
render（）
基本上是一个
函数
，函数总是接受许多参数，并且总是只返回一个值

像这样：

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

render（）{
const{route}=this.props；
const post=route.page.data；
返回
{this.props.route.page.data.skills.map（el=>(
...
))}
)
}

在
map
主体
el
中将是数组的每个
对象
，要访问任何值，请使用
el.keyName
您需要在地图中接收
技能
，因为您的地图函数将接收数组的每个元素

您可以获得地图接收的技能对象中每个元素的信息

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

返回(
{this.props.route.page.data.title}

{
this.props.route.page.data.skills.map（（skill）=>{
return
{skill}
})
}

)

在这里，您将只显示一次标题，然后您将创建每个技能列表的一个元素。还要记住，如果要在映射或任何迭代函数中创建JSX元素，则需要使用
键
参数，因为React使用此键可以更好地优化组件的重新渲染

希望有帮助
 您需要在地图中接收
技能
，因为您的地图功能将接收数组的每个元素

您可以获得地图接收的技能对象中每个元素的信息

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

返回(
{this.props.route.page.data.title}

{
this.props.route.page.data.skills.map（（skill）=>{
return
{skill}
})
}

)

在这里，您将只显示一次标题，然后您将创建每个技能列表的一个元素。还要记住，如果要在映射或任何迭代函数中创建JSX元素，则需要使用
键
参数，因为React使用此键可以更好地优化组件的重新渲染

希望有帮助
 是的，我理解一般的想法，但我的问题是如何准确地执行：）现在我的控制台向我显示错误，如：“Post.render（）：必须返回有效的React元素（或null）。您可能返回了未定义的、数组或其他无效对象。”哦，是的，对不起，您需要将整个
map
内容包装到另一个容器组件中，以便组件
render
函数返回单个元素，而不是元素数组。我已经更新了我的答案。是的，我理解了总体思路，但我的问题是如何准确地执行：）现在我的控制台向我显示错误，如：“Post.render（）：有效的React元素（或