Question

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

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

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

<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是正确的代码，并映射到CodeWords集合。

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组件。

Answer 1

由于您将... 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

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

1 个答案: