Question

我的页面包含两个完全独立的React组件（不同的文件，不同的类，没有父子关系）。

一个组件如何在另一个组件中调用实例方法？问题似乎是获取目标组件的实例。

编辑：两个组件共享相同的父组件（即它们以相同的render()方法呈现）但我仍然不知道如何将目标组件的引用传递给调用组件。 / p>

Answer 1

简短的回答是：他们没有。

目前尚不清楚你想要完成什么，所以我不能谈论你案件的细节，但是React组件之间“沟通”的方式是通过状态和道具。例如，考虑一个Page组件，它有两个子组件CompA和CompB，呈现如下：

<Page>
    <CompA />
    <CompB />
</Page>

如果CompA需要将某些内容传递给CompB，则可通过Page组件上的状态完成此操作，该状态在CompA和{{1这样的事情：

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组件。

你所描述的组件之间没有直接的沟通;这一切都是通过国家和道具完成的。

Answer 2

“Props down，Events up。”

如果您向我们提供了您正在寻找的具体示例，我可以通过更具体的回复来更新此帖子。

但总的来说，您可以采取一些策略。 Some of them are presented here.

首选方法是简单地将调用方法移动到父组件。这是React的常用策略。

如果你不能，那么下一步就是为父代写一个事件处理程序，然后将这个事件传递给第一个子组件。

使用此事件将信息传递给父级，以便在触发时，数据可以作为props传递给第二个组件。

Answer 3

我最近才开始做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组件传递属性，这样最后一级的东西就可以在第一级触发一些东西了。

这并不是说这种方法没有问题：

它在通用对象对象，任何用于在对象中存储对自身的引用的组件以及任何希望利用这些对象的组件之间创建明显的依赖关系引用。然后，再次使用任何类型的全局状态管理解决方案创建类似的依赖关系。
如果您在尝试从SecondComponent中调用FirstComponent之前有任何疑问，那么这可能是一个糟糕的解决方案。
我发现仅将引用添加到React组件将不允许您执行React组件可以本机执行的所有操作。例如，调用 objects.FirstComponent.setState（）将无效。您可以在FirstComponent中调用一个方法，而FirstComponent又可以调用它自己的 setState（），但是您不能直接从SecondComponent中调用FirstComponent的 setState（）。坦率地说，我认为这是一件好事。
但是，您可以直接从对象中引用的组件访问状态值。
这应该只使用“全局”组件（功能上作为单例的组件）来完成。例如，如果您有一个名为 BasicSpan 的简单UI组件，它只执行基本范围标记，并且您在整个React应用程序中一遍又一遍地使用该组件 < / em>，我敢肯定，尝试在对象对象中放置对这些简单组件的引用，然后尝试智能地管理对这些组件的内部方法的调用，这将很快变成难以管理的噩梦。 / LI>

Answer 4

您可以将活动作为道具发送，并从其他组件中调用。

假设你有一个班级

    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>

    );

    }

当您在组件B中更改输入时，它将调用该方法 A类和更新A的状态。
现在将更新状态作为组件B中的道具获取您刚刚输入的已更改文本

一个React组件如何在另一个React组件中调用方法？

4 个答案: