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，您将充分利用可重用性。在上面的代码中，我可以看到您正在尝试在函数@Override protected void onStop() { super.onStop(); WordAdapter stopSoundAndReleasIt = new WordAdapter(this); stopSoundAndReleasIt.releaseMediaPlayer(); }中呈现状态中的项目。在任何语言中使用renderItem()的需求也是为了确保可重用性。因此，在React中，当您想要重新使用将返回HTML元素的部分时，请将其作为单独的组件。

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

在此，我将functions作为单独的组件renderItem()，可以在<RenderItem>个其他组件中重复使用..

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

2 个答案: