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

【问题标题】：In React JavaScript, How to call a class inside another class?在 React JavaScript 中，如何在另一个类中调用一个类？
【发布时间】：2020-07-24 16:04:48
【问题描述】：

这几天开始学习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

【问题讨论】：

标签： javascript reactjs class grid components

【解决方案1】：

为此，您需要致电children inprops

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

【讨论】：

【解决方案2】：

我没有看到 Node 类在哪里被引用，所以我不确定这是否相关。

您的问题是您将nodes 组件传递给NodeContainer 组件，而不是在NodeContainer 中渲染它。您应该查看props 是如何传递给组件的——它们在组件上显示为this.props.children。您的代码应如下所示。

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

如果您想知道 nodes 是如何显示为 this.props.children 的，那是因为 React 是如何处理组件的。您可以通过将其作为道具显式传递给children 来实现相同的目的。

【讨论】：

【解决方案3】：

老兄，在 reactJS 中，应该有数据要从您的 Parent 元素传递到您的 Children 元素。在您的情况下能够显示您想要的数据，

您需要将您的状态从<PathFindingVisualizer /> 传递到您的<NodeContainer />，您已经通过使用节点作为<NodeContainer /> 标记之间的子节点来完成此操作。而你忘记了第二步，
您需要访问在您创建的<NodeContainer /> 类中传递的数据。如何？只需使用this.props.children.访问它

这是示例。

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

问题已解决。

作为参考，请参阅此。 https://learn.co/lessons/react-this-props-children

【讨论】：