Question

正如您在以下代码中看到的，我想在loadContent()中建立一个从ReactComponent调用的ajax调用。访问子方法时，我们可以使用refs关键字。但是，当呼叫者和接收者的关系不是父母和孩子时。如何在react中访问该方法？

ComponentA

这是一个全局组件，可将其功能与所需的所有其他反应组件共享。

import $ from 'jquery';

class ComponentA {
    loadContent() {
        $.ajax({
            type: "POST",
            url: "xxxx",
            success: function(data) {
                 // Update the content of ReactComponent.
                 callToThatReactComponent.setContent(data); //Here is the problem
            }
        });
    }
}

var compA = new ComponentA();
export default compA;

ReactCompoment

import React from 'react';
import ComponentA from 'path/to/ComponentA';  // The global module

export default class ReactComponent extends React.Component {
    constructor(props) {
        super(props);
        ComponentA.loadContent();
    }

    setContent(_content) {
        this.setState({
            content: _content
        });
    }
}

Answer 1

您可以使用回调执行此操作在ComponentA

class ComponentA {
    loadContent( update ) {
        $.ajax({
            type: "POST",
            url: "xxxx",
            success: function(data) {
                 // Update the content.
                 update(data);
            }
        });
    }
}

在ReactCompoment中：

   ComponentA.loadContent( content => {         
                             this.setState({ content: content}) } 
                         );

Answer 2

学习Redux和Thunks。摆脱你拥有的这个全局组件。您正在尝试重新创建像flux或redux这样的状态管理系统，但却做错了。

动作文件：

const loadContent  = () => {
    return (dispatch, getState) => {
        $.ajax({
            type: "POST",
            url: "xxxx",
            success: function(data) {
                 // Update the content of ReactComponent.
                 dispatch({ type: 'LOAD_CONTENT_SUCCESS', data });
            }
        });
    }
};

reducers文件：

任何没有副作用的函数逻辑（如api调用或Math.Random（））都会在这里进行。

const reducer = (state={}, action) => {
    switch(action.type) {
        case "LOAD_CONTENT_SUCCESS":
            return {
                ...state,
                action.data
            };
    }
}

任何组件文件：

使用mapStateToProps可以访问商店中的任何数据。

const mapStateToProps = (state) => ({
    data: state.data
});

export default connect(mapStateToProps)(
    class extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            return <div>{this.props.data}</div>
        }
    }
)

从全局Webpack模块访问特定React组件中的特定方法

ComponentA

ReactCompoment

2 个答案: