Question

我正在尝试在ReactJS中实现类似于Angular的ngFor指令。我已经看到了map的示例，但仍不确定如何正确实现它。

提供更多背景信息；我需要构建一个网格，每个正方形都具有从JSON文件读取的字母值；我为每个正方形都构建了一个组件，所以看起来像这样

class Square extends React.Component {
    render() {

        return (
            <div className="square">
                {this.props.letters.board.map((letter) => <span>{letter}</span>)}
            </div>
        );
    }
}

这个letters道具将是我需要读取的JSON文件，这主要是我不确定我是否做得正确：

function App() {
  let letters = require('./test-board-2.json');
  console.log(letters);
  return (
    <div className="App">
      <div className="container">
        <div className="letters">
          <Square letters={letters}/>
        </div>
        <div className="controls">
          <Clear />
        </div>
      </div>
    </div>
  );
}

我实际上以适当的方式读取JSON文件吗？实际上，我得到的console.log很好，但是呈现的只是json文件所有值的一个正方形，而不是每个值一个正方形。

这是json文件的样子：

{
    "board": [
        "L",
        "I",
        "S",
        "T",
        "O",
        "F",
        "A",
        "T",
        "S",
        "T",
        "R",
        "S",
        "O",
        "R",
        "A",
        "Y"
    ]
}

感谢任何帮助，我主要有Angular背景，并且我才刚刚开始学习React。

Answer 1

之所以只看到一个Square，是因为您要将整个JSON对象传递到<Square />组件中，然后遍历Square内部的数组。

您应该做的是在Square组件外部遍历数组，并为该数组的每个元素渲染一个Square组件，如下所示：

function App() {
  let letters = require('./test-board-2.json');
  console.log(letters);
  return (
    <div className="App">
      <div className="container">
        <div className="letters">
          {letters.board.map(letter => <Square letter={letter}/>)}
        </div>
        <div className="controls">
          <Clear />
        </div>
      </div>
    </div>
  );
}

现在，您可以在letter组件内部使用<Square />道具，就像这样：

function Square() {
  render() {
    return (
      <div className="square">
        <span>{this.props.letter}</span>
      </div>
    );
  }
}

Answer 2

我的猜测是，您从JSON文件中读取的内容将成为对象。尝试通过

将其传递给正方形元素

<Square letters={letters.board}/>

如何在React中从JSON文件生成具有每个值的组件？

2 个答案: