Использование функции одного компонента в другом в react

Всем привет, не могу откопать информацию как можно использовать функции дочерних компонентов из родительского и наоборот.

Например у меня есть компонент CreateTableView и в нем вызывается функция ajax которая подгружает данные и допустим компонент AccessOwers. При изменении каких либо свойств в AccessOwers, мне нужно что бы таблица обновлялась и выполняла функцию ajax компонента CreateTableView/

В данном случае интересует именно какой нибудь рабочий пример взаимодействия, а не обходные решения данной проблемы, т.к в работе с реактом лучше разбивать все на мелкие компоненты, но бывают случаи когда нужно выполнить функцию другого компонента.

Пример из проекта ( но не рабочий, т.к его сильно порезал):

 var AccessOwers = React.createClass({
render : function(){

    var user = this.props.counterProp;
    var content = [];
    var counter = 0;

    if(user.contractors){
        _.each(user.contractors, function(contractors, index){
            counter++;
            content[index] = <option value = {contractors.id} key = {index}>{contractors.name}</option>;
        });
    }else{
        content[0] = <option value = "0" key = "0">нету</option>;
    }

    var counterOwers = <span className="badge badgeTable">{counter}</span>;

    return(
        <td>
            <select id = {"selectContractors" + user.id} className='styleForSelect'>
                {content}
            </select>
            {counterOwers}
        </td>
    );
}

});

var CreateTableView = React.createClass({

componentWillReceiveProps(nextProps) {
    this.ajax();
},

ajax : function(){

    $.ajax({
        dataType : 'json',
        url      : '/Admin/getDataUsers',
        data     : {
            filter : filter
        },
        success : function (data) {

        }
    });
},

render : function(){

    return (
        <div>
            <div class = "table-responsive" >
                <table className="table table-bordered">
                    <thead>
                    <tr>
                        <th className={styleEdit}>*</th>
                        <th>ID</th>
                        <th>Вкл.</th>
                        <th>Поставщик</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.owner.map(function(i, k) {

                       
                        return <tr key = {k}>
                            <td className={styleEdit}><a className="glyphicon glyphicon-edit" title = {i.id} onClick={openModalChangeUsers}></a></td>
                            <AccessOwers counterProp={i}/>
                        </tr>
                    })}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

});

ReactDOM.render(
<div>
    <CreateTableView />
</div>,
document.getElementById('tableOwnersView')

);

Ты столкнулся с задачей менеджмента состояния приложения. Когда разные компоненты должны иметь доступ к одним и тем же данным. И при этом реагировать на изменения этих данных.

В общем виде задача решается так.

  1. Берешь штуку типа https://github.com/mobxjs/mobx. Это библиотека с помощью которой конструирешь объект. Этот объект будет представлять состояние приложения. В него будешь записывать результаты ajax ответов и ту информацию, которую надо знать в нескольких компонентах. Как альтернативу можно использовать Redux.
  2. В реакт компонентах описывашь как компонент использует значения из объекта, сконструированного mobx-ом. И когда изменяешь значения mobx объекта из компонента, другие компоненты, которые используют это значение в себе, реагируют.
  3. И теперь ты хранишь настройки запроса в mobx объекте, изменяешь эти значения из AccessOwers. А в CreateTableView описываешь как, используя настройки из mobx объекта, сделать запрос и положить данные ответа в mobx объект.
1 симпатия