反应-集中化ajax电话？

Its a common problem and I'm not really sure this kind of approach is possibile.

As you know, react use a top-down component structure. Unfortunally I often need some Ajax Call in differente places and I don't want to rewrite the call in every component or search a top component where put it and then pass through props.

What I was thinking is some sort of "library" class with all Ajax Calls (organized by purpose) and than call them from every component passing a callback method to allow caller to modify its own "state" with the result of the class (in the complete/success method of $.ajax).

Following THIS guide, Im using a fusion of Root and Container approach but the first solution fill the root component with too much calls and the second approach has the scope of the below component and not horizzontal.

Is this possibile?

If I get you correctly, you might try to create a higher order component that wraps any of your components that needs ajax call capabilities.

For example let's say you want some of your components on componentDidMount to make an ajax call:

//... 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)

</div>

Thanks Karen Grigoryan for the answer but I don't think im understanding your code. Lets explain better what Im looking for:

and what Im trying without success:

This is the API component every other component may call simply importing it without worring about component structure.

    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);

Then, the caller has "something" like this:

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

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

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