时间戳

首页 > 解决方案 > 在 React JavaScript 中，如何在另一个类中调用一个类？

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

问题描述

这几天开始学习 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
      </>
    );
  }
}

网格消失了，没有任何内容<body>：

在此处输入图像描述

有人可以帮助我吗？我无法弄清楚为什么会这样。

类 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>;
  }
}



嘿，谢谢你们的回答：）这是我第一次在这里提问。正如你所说，我通过添加 {this.props.xxxxx} 解决了这个问题并且它有效。更正的代码如下：

...
        <br />
        <br />
        <NodeContainer nodes={nodes}></NodeContainer> // HERE
      </>
...

NodeContainer 类：

export default class NodeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div className="node-container">{this.props.nodes}</div>; //HERE
  }
}

我没有使用“this.props.children”，但稍后会检查。我跳过了基本教程，所以我不明白如何将参数传递给课堂，我查看了这个视频以帮助自己快速理解这一点：
https ://www.youtube.com/watch?v=ICmMVfKjEuo&list=PLN3n1USn4xlntqksY83W3997mmQPrUmqM&index=5&t=0s

标签： javascriptreactjsclassgridcomponents

解决方案

为此，您需要children致电props

export default class NodeContainer extends Component {
  render() {
    return <div className="node-container">{this.props.children}</div>;
  }
}

推荐阅读