javascript - 在ReactJS中，如何将集合传递给子元素？

在我的React应用程序中，我在Main.jsx的构造函数中设置了一个状态对象：

this.state = { code: [['Z','R','W','O'],['R','C'],['J'],['N','S','J','T','O','X','K']]}

然后，我可以将该对象作为道具传递给子对象：

<CodeArea code={this.state.code}/>

在我的CodeArea组件中，我想创建一个单词集合，每个代码的子数组一个，然后将其传递给CodeWords组件。

CodeArea.jsx：

import CodeWords from "./CodeWords"

export default class CodeArea extends React.Component {
  render() {
    let words = this.props.code.map((word, index) => <CodeWords key={index} {...word} />)
    return(
      <div className="collection">
        {words}
      </div>
    )
  }
}

this.props.code是正确的代码，并映射到CodeWord的集合。

CodeWords.jsx：

import CodeLetter from "./CodeLetter"

export default class CodeWords extends React.Component {
  render() {
    let word = this.props.words.map((letter, index) => <CodeLetter key={index} {...letter} />)
    return (
      <table>
        {word}
      </table>
    )
  }
}

我在CodeWords中遇到错误：

CodeWords.jsx:5 Uncaught TypeError: Cannot read property 'map' of undefined
at CodeWords.render (CodeWords.jsx:5)

如何在CodeWords中引用CodeArea中的{words}集合？我最终希望采用每个{words}元素（应为CodeWords组件），并将其拆分为CodeLetter组件。

最佳答案

由于将... word散布到CodeWords组件上，因此可以有效地创建这样的组件（react docs）：

<CodeWords key={index} Z='Z' R='R' W='W' O='O' />

您要在CodeArea中执行的操作是将codeWord（整个字母数组）发送到CodeWords组件：

let words = this.props.code.map((codeWord, index) => <CodeWords key={index} words={codeWord} />)

这将在this.props.words组件中为您提供CodeWords。

我还认为重命名一些内容将使您受益：


您的CodeWords组件可以是CodeWord（单数），因为在我看来您打算只代表单个字母组。
let words变量可以是let codeWords
在CodeWords中，let word应该应该是let letters

关于javascript - 在ReactJS中，如何将集合传递给子元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41469039/