Question

这是一个常见问题，我不确定这种方法是否可行。

如您所知，反应使用自上而下的组件结构。不幸的是，我经常在不同的地方需要一些Ajax Call，我不想在每个组件中重写调用，或者搜索放置它的顶级组件，然后通过道具。

我在想的是某种＆＃34;图书馆＆＃34;所有Ajax调用的类（按目的组织），并通过回调方法从每个组件调用它们，以允许调用者修改自己的＆＃34;状态＆＃34;使用类的结果（在$ .ajax的完整/成功方法中）。

在THIS指南之后，我使用了Root和Container方法的融合，但是第一个解决方案用过多的调用填充了根组件，第二个方法具有以下组件的范围而不是水平。

这可能吗？

Answer 1

如果我找到你，你可能会尝试创建一个更高阶的组件来包装任何需要ajax调用功能的组件。

例如，假设您希望componentDidMount上的某些组件进行ajax调用：

＆＃13;

//... the HoC itself
const onMount = (ajaxSpecificCall, BaseComponent) => class extends Component{

    componentDidMount() {
        ajaxSpecificCall()
            .then(this.setState({promise}));
    },

    render() {
        return (
            <BaseComponent {...this.props} {...this.state.promise} />
        );
    },
};

//... in the component
class SomeComponent extends Component {
  ajaxCall() {
  }
  render() {
    //...
  }
}

export default onMount(ajaxCall, SomeComponent)

＆＃13;

Answer 2

感谢Karen Grigoryan的答案，但我不认为我理解你的代码。让我们更好地解释我在寻找什么：

以及我没有成功的尝试：

这是每个其他组件可以调用的API组件，只需导入它而不必担心组件结构。

    class GadgetAPI extends React.Component
    {
        constructor(props)
        {
            super(props);
        }

        componentDidMount()
        {
            $.ajax({
                method: 'GET',
                dataType: 'json',
                data: {        
                    module_dir : this.props.param,
                },
                url: someURL,
                success: function(result){
                    this.props.callback(result.gadgets);
                }.bind(this),
            })
        }

    }

export default (GadgetAPI);

然后，来电者有“像这样的东西”：

onClickEventHandler()
{
    this.getGadgetsAvailable("foo");
}

callback(data)
{
   this.setState({ 'gadgets_list' : data })
}

getGadgetsAvailable(name)
{
   return <GadgetAPI param = { name }  callback = { this.callback} />
}

React - 集中ajax调用？

2 个答案: