如何在reactjs中列出数据

如何在

react js

中

呈现列表

这是我的密码：

class First extends React.Component {
    constructor (props){ super(props); }

    render() {
        const data =[{"name":"test1"},{"name":"test2"}];
        const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;

        return (
            <div>
                hello
            </div>
        );
    }
} 

类首先扩展React.Component{
构造函数（props）{super（props）；}
render（）{
const data=[{“name”：“test1”}，{“name”：“test2”}]；
const listItems=data.map（（d）=>
{d.name}
；
返回(
你好
);
}
} 

您需要将map函数放在组件的返回方法中，在您的示例中，您正在初始化值，但没有在DOM中呈现任何内容 :

类首先扩展React.Component{
构造函数（props）{super（props）；}
render（）{
const data=[{“name”：“test1”}，{“name”：“test2”}]；
返回(
{
data.map（（d）=>{
return
{d.name}
}) 
}
)
}
} 

您需要将map函数放在组件的返回方法中，在您的示例中，您正在初始化值，但没有在DOM中呈现任何内容 :

类首先扩展React.Component{
构造函数（props）{super（props）；}
render（）{
const data=[{“name”：“test1”}，{“name”：“test2”}]；
返回(
{
data.map（（d）=>{
return
{d.name}
}) 
}
)
}
} 

如何呈现列表的示例：

 class App extends React.Component {
  render() {
    const data = ['a', 'b', 'c']

    return (
      <ul>
        {data.map(item => {
          return <li>{item}</li>;
        })}
      </ul>
    );
  }
}

类应用程序扩展了React.Component{
render（）{
常量数据=['a'、'b'、'c']
返回(

{data.map（项=>{
返回
{item}
；
})}

);
}
}

---

代码沙盒示例：

如何呈现列表的示例：

 class App extends React.Component {
  render() {
    const data = ['a', 'b', 'c']

    return (
      <ul>
        {data.map(item => {
          return <li>{item}</li>;
        })}
      </ul>
    );
  }
}

类应用程序扩展了React.Component{
render（）{
常量数据=['a'、'b'、'c']
返回(

{data.map（项=>{
返回
{item}
；
})}

);
}
}

代码沙盒示例：

好问题

我建议将其拆分为自己的组件

// This is what's called a Functional Component
const DataList = ({
  ...props
}) => (
  <ol>
    props.map((d, index) => {
      return <li key={d.name + "-" + index}>{d.name}</li>;
    }
  </ol>
);

class Parent extends React.Component {
  constructor (props) {
    super(props);

    this.setState = {
      data: [{"name":"test1"},{"name":"test2"}]
    }
  }

  render() {
    return (
      <div>
        <DataList {...this.state.data} />
      </div>
    );
  }
}

//这就是所谓的功能组件
常量数据列表=({
…道具
}) => (
道具地图（（d，索引）=>{
返回
{d.name}
；
}
);
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.setState={
数据：[{“名称”：“test1”}，{“名称”：“test2”}]
}
}
render（）{
返回(
);
}
}

这更像是一种“反应方式”。它使父级的呈现方法更清晰/更易于阅读，并允许您扩展此简单列表（例如，您希望添加标题或在多个位置呈现列表）

我知道这是一个简单的例子，但我只想提一下，最好不要为在渲染方法中要迭代的列表创建变量。原因是每次渲染父对象时，它都必须为变量

数据
和
列表项
分配内存。这就是为什么我将它们置于
父对象的状态下de>的
构造函数
方法。它只会为
父类
的每个实例分配一次

此外，这更有效，因为DataList组件只实例化一次，React可以在列表上执行它的差异算法，而不必每次都重新创建整个内容。如果这变得更大，您可以开始根据数据是否存在或添加life c，围绕列表的条件呈现添加功能循环方法以仅在数据更改时呈现列表（尽管要添加生命周期方法，需要将其从功能组件更改为基于类的组件）

我希望这能有所帮助。
好问题

我建议将其拆分为自己的组件

// This is what's called a Functional Component
const DataList = ({
  ...props
}) => (
  <ol>
    props.map((d, index) => {
      return <li key={d.name + "-" + index}>{d.name}</li>;
    }
  </ol>
);

class Parent extends React.Component {
  constructor (props) {
    super(props);

    this.setState = {
      data: [{"name":"test1"},{"name":"test2"}]
    }
  }

  render() {
    return (
      <div>
        <DataList {...this.state.data} />
      </div>
    );
  }
}

//这就是所谓的功能组件
常量数据列表=({
…道具
}) => (
道具地图（（d，索引）=>{
返回
{d.name}
；
}
);
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.setState={
数据：[{“名称”：“test1”}，{“名称”：“test2”}]
}
}
render（）{
返回(
);
}
}

这更像是一种“反应方式”。它使父级的呈现方法更清晰/更易于阅读，并允许您扩展此简单列表（例如，您希望添加标题或在多个位置呈现列表）

我知道这是一个简单的例子，但我只想提一下，最好不要为在渲染方法中要迭代的列表创建变量。原因是每次渲染父对象时，它都必须为变量
数据
和
列表项
分配内存。这就是为什么我将它们置于
父对象的状态下de>的
构造函数
方法。它只会为
父类
的每个实例分配一次

此外，这更有效，因为DataList组件只实例化一次，React可以在列表上执行它的差异算法，而不必每次都重新创建整个内容。如果这变得更大，您可以开始根据数据是否存在或添加life c，围绕列表的条件呈现添加功能循环方法以仅在数据更改时呈现列表（尽管要添加生命周期方法，需要将其从功能组件更改为基于类的组件）

我希望这有帮助