在React JavaScript中，如何在另一个类中调用一个类？

Question

这些天我开始学习JavaScript和React，我试图在网站上绘制一些网格并遇到了这样的问题：

当我这样编码时，一切正常：

export default class PathfindingVisualizer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nodes: [],
    };
  }

  componentDidMount() {
    const nodes = getInitialGrid();
    this.setState({ nodes });
  }

  render() {
    const { nodes } = this.state;
    console.log(nodes);
    return (
      <>
        <p style={{ fontSize: 40 }}>Visualize Algorithms</p>
        <br />
        <br />
        <div className="node-container">{nodes}</div>  // HERE WORKS FINE
      </>
    );
  }
}

并且该网站原来是这样，很好：

但是当我这样更改代码时：

  render() {
    const { nodes } = this.state;
    console.log(nodes);
    return (
      <>
        <p style={{ fontSize: 40 }}>Visualize Algorithms</p>
        <br />
        <br />
        <NodeContainer>{nodes}</NodeContainer>  // HERE
      </>
    );
  }
}

网格只是消失了，而::>中没有任何内容>

有人可以帮我吗？我不知道为什么会这样。

Class NodeContainer和Node就像这样：

export default class NodeContainer extends Component {
  render() {
    return <div className="node-container"></div>;
  }
}
export default class Node extends Component {
  render() {
    return <div className="node-item"></div>;
  }
}

这些天我开始学习JavaScript和React，我试图在网站上绘制一些网格，并遇到了这样的问题：当我这样编写代码时，一切工作正常：export default class ...

Answer 1

为此，您需要在children中调用props

Answer 2

我看不到Node类的引用位置，所以不确定是否相关。

Answer 3