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

Posted 2023-02-23

【中文标题】如何在 ReactJS 中的另一个类中呈现类列表？

【英文标题】：How do you render a list of classes inside another class in 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 中可行吗？

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

【参考方案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'/>
  

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

【讨论】：

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