在 React JavaScript 中，如何在另一个类中调用一个类？
Posted
技术标签:
【中文标题】在 React JavaScript 中，如何在另一个类中调用一个类？【英文标题】：In React JavaScript, How to call a class inside another class? 【发布时间】：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
【问题讨论】：
【参考方案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
【讨论】：
以上是关于在 React JavaScript 中，如何在另一个类中调用一个类？的主要内容，如果未能解决你的问题，请参考以下文章
在后台从 React 组件制作 HTML 字符串，如何在另一个 React 组件中通过危险的SetInnerHTML 使用该字符串
React Native：如何正确地将 renderItem 项传递给 FlatList，以便它们可以在另一个组件中呈现？