将对象数组渲染为 <li> 在react.js中

Question

我读了一篇文章，下面是代码的作者评论家，我想知道这是怎么回事。 我开始学习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'));

Answer 1

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

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

父组件的render方法应该是：

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

这是我们编写React组件的标准方式。 用这种方式编写时会引起可维护性问题。

Answer 2

简而言之，您的代码将无法确保组件的可重用性 。

使用React，您将获得最大的可重用性 。 在上面的代码中，我可以看到您正在尝试在状态renderItem()渲染项目。 还需要使用任何语言使用functions ，以确保可重用性 。 因此，在React中，当您想重新使用将返回HTML元素的部件时，请将其作为单独的组件。

参见以下小提琴https://jsfiddle.net/Pranesh456/b6v6fxrj/1/

在这里，我将renderItem()作为一个单独的组件<RenderItem>进行使用，可以在n个其他组件中重复使用。