Javascript 将对象数组渲染为<；李>；在react.js中

我读了一篇文章，作者批评了下面的代码，我想知道它有什么问题。我开始学习React，可惜作者没有指出下面代码的问题所在。我测试了下面的代码，运行良好

import React from 'react';
import './App.css';

const TodoItems = React.createClass({
  getInitialState() {
    return {
      items : [
        {id:1,name:"Gym"},
        {id:2,name:"Jump"},
        {id:3,name:"Racing"}
      ] 
    }
  },
  renderItem(){
    return(
      <ul>
      {this.state.items.map((item,i) => 
        <li key={i}>item.name</li>
      )}
      </ul>
    ) 
  },
  render(){
    return (
      <renderItem />
    )
  }

})

ReactDOM.render(<TodoItems />,document.getElementById('app'));

从“React”导入React；
导入“/App.css”；
const TodoItems=React.createClass({
getInitialState（）{
返回{
项目：[
{id:1，名称：“健身房”}，
{id:2，名称：“Jump”}，
{id:3，名称：“赛车”}
] 
}
},
renderItem（）{
返回(

{this.state.items.map（（item，i）=>
item.name
)}

) 
},
render（）{
返回(
)
}
})
ReactDOM.render（，document.getElementById（'app'））；

简而言之，您编写的代码不会确保组件的可重用性

使用React，您将充分利用可重用性。在上面的代码中，我可以看到您正试图在函数

renderItem（）

中呈现处于状态的项。在任何语言中使用

函数

的需要也是为了确保可重用性。因此，在React中，当您想要重用将返回HTML元素的部分时，将其作为单独的组件

看下面的小提琴

---

在这里，我将

renderItem（）

作为一个单独的组件

，可以在

n

许多其他组件中重用

方法renderItem应作为功能组件或无状态组件位于外部：

const RenderItem = (props) => {
    return(
      <ul>
      {props.items.map((item,i) => 
        <li key={i}>item.name</li>
      )}
      </ul>
    ) 
  };

const RenderItem=（道具）=>{
返回(

{props.items.map（（item，i）=>
item.name
)}

) 
};

父组件的渲染方法应为：

render(){
    return (
      <RenderItem items={this.state.items} />
    )
  }

render（）{
返回(
)
}

---

这是我们编写React组件的标准方法。这样写会导致可维护性问题。

为什么要使用

li

？@ThianKianPhin的意思？