如何在 ReactJS 中的另一个类中呈现类列表？答案

【问题标题】：How do you render a list of classes inside another class in ReactJS?如何在 ReactJS 中的另一个类中呈现类列表？
【发布时间】：2018-12-30 00:58:11
【问题描述】：

我有一个名为 Transactions 的课程和一个名为 Student 的课程。当我渲染学生时，我还想渲染一个交易列表。

例如，像这样的：

<Student name="John" transactions="
                                   <transactions item='Bread' amount='1'/>
                                   <transactions item='Butter' amount='2'/>
                                   <transactions item='Milk' amount='3'/>
                                   <transactions item='Egg' amount='4'/>"
/>

这在 React 中可行吗？

编辑：如果我有多个学生有不同的交易怎么办？如何将每个交易列表呈现给每个学生？

【问题讨论】：

标签： reactjs class components

【解决方案1】：

考虑到Student 应该呈现Transactions 的列表，它可能不应该接受组件列表而是交易列表，例如：

class Student extends Component {
  render() {
    return this.props.transactions.map(({ item, amount }) =>
    <Transactions item={ item } amount={ amount } />
    ); 
  }
}

并且可以像这样使用：

<Student transactions={[
  { item: 'foo', amount: 1 },
  { item: 'bar', amount: 2 }
]} />

根据事务的结构，它们可以以更方便的方式存储，例如Map。

【讨论】：

尝试此操作后，它显示this.props.transactions.map is not a function。你知道这是什么原因吗？
这意味着transactions prop 没有提供数组。
我猜这是因为transactions 恰好是空的。我会尝试解决这个问题。谢谢！

【解决方案2】：

这很简单。您必须在 <Student /> 类中使用 render(){}。请看下面的示例代码。

class Student extends React.Component {
  render(){
    <transactions item='Bread' amount='1'/>
    <transactions item='Butter' amount='2'/>
    <transactions item='Milk' amount='3'/>
    <transactions item='Egg' amount='4'/>
  }
}

它被称为嵌套组件以进行更多搜索。希望我的回答对你有用。

【讨论】：

对不起，我应该进一步澄清我的问题。如果我有多个学生有不同的交易怎么办？