Question

我有一个名为“交易”的课程和一个名为“学生”的课程。当我呈现学生时，我还要呈现交易清单。

例如，如下所示：

<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中有可能吗？

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

Answer 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这样更方便的方式存储它们。

Answer 2

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

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'/>
  }
}

它被称为嵌套组件用于更多搜索。希望我的回答对您有用。

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

2 个答案: