我的页面包含两个完全独立的 React 组件（不同的文件、不同的类、没有父子关系）。
一个组件如何调用另一个组件中的实例方法？问题似乎是获取目标组件的实例。
编辑：两个组件共享同一个父组件（即它们以相同的render() 方法呈现）但我仍然不知道如何将目标组件的引用传递给调用组件。
【问题讨论】：
标签： reactjs
简短的回答是：他们没有。
不清楚你想要完成什么，所以我不能谈论你的具体情况，但 React 组件相互“通信”的方式是通过 state 和 props。例如，考虑一个有两个子组件CompA 和CompB 的Page 组件，渲染如下：
<Page>
<CompA />
<CompB />
</Page>
如果CompA 需要向CompB 传递一些东西，这是通过Page 组件上的状态来完成的，该状态作为CompA 和CompB 上的道具公开，如下所示：
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
sharedValue: 42,
};
}
onChangeSharedValue(newValue) {
this.setState({ sharedValue: newValue });
}
render() {
return (
<div>
<CompA
sharedValue={this.state.sharedValue}
onChange={this.onChangeSharedValue}
/>
<CompB
sharedValue={this.state.sharedValue}
onChange={this.onChangeSharedValue}
/>
</div>
);
}
}
如果CompA 需要更改共享值，它会调用onChange 处理程序，这将更改Page 组件上的状态。然后该值将向下传播到CompB 组件。
您所描述的组件之间没有直接通信；这一切都是通过 state 和 props 完成的。
【讨论】：
“道具下降，事件上升。”
如果您向我们提供您正在寻找的具体示例，我可以用更具体的回复更新此帖子。
但总的来说，您可以采取几种策略。 Some of them are presented here.
首选方法是将调用方法简单地移至父组件。这是 React 中的常用策略。
如果你做不到，那么下一步就是为父组件编写一个事件处理程序，然后将此事件传递给第一个子组件。
使用此事件将信息向上传递给父组件，这样当它被触发时，数据可以作为道具向下传递给第二个组件。
【讨论】：
我最近才开始进行 React 开发，并找到了适合我的解决方案。诚然，我没有看到它在任何地方被引用过，当我把它展示给一位从事 React 多年的同事时，他有点皱起眉头，觉得这不“正确”，但他无法真正向我解释为什么它是“错误的”。我敢肯定我会在这里大喊大叫，但我想我还是会分享：
文件 #1：objects.js
let objects= {};
export default objects;
文件 #2：firstComponent.js
import React from 'react';
import objects from 'objects';
class FirstComponent extends React.Component {
constructor(props) {
super(props);
objects['FirstComponent'] = this; // store a reference to this component in 'objects'
}
doSomethingInFirstComponent() {
console.log('did something in first component');
}
render() {
return (<div></div>);
}
}
export default FirstComponent;
文件 #3：secondComponent.js
import React from 'react';
import objects from 'objects';
class SecondComponent extends React.Component {
render() {
objects.FirstComponent.doSomethingInFirstComponent(); // call the method on the component referred to in 'objects'
return (<div></div>);
}
}
export default SecondComponent ;
SecondComponent 渲染时，会触发 FirstComponent.doSomethingInFirstComponent() 中的 console.log()。当然，这假设 FirstComponent 实际上是已安装。
我认识的“React Guys”似乎认为这种方法在某种程度上是邪恶的。它使用正常 React 范围之外的简单 JavaScript 对象来维护对我选择存储在那里的任何现有对象的引用。除了他们告诉我“这不是你在 React 中做事的方式”之外，我还没有找到一个很好的解释来解释这将如何破坏或以其他方式破坏我的应用程序。我将它用作 Redux 等大规模过度杀伤状态管理工具的低级替代品。我还使用它来避免必须通过数十层 React 组件向下传递属性，以便最后一层的某些东西可以触发第一层的某些东西。
这并不是说这种方法没有问题：
【讨论】：
您可以将事件作为道具发送并从其他组件调用。
假设你有一堂课
Class A{
handleChange(evt)
{
this.setState({
name:evt.target.value
})
}
render{
return(
<div>
<ComponentB name={this.state.name}{ onChange={this.handleChange}/>
</div>
);
}
}
子组件
Class B{
handleChange()
{
//logic
}
render{
return(
<div>
<input type="text" onChange={this.props.onChange}/>
{this.props.name}
</div>
);
}
【讨论】：