Вызов функций на вложенных компонентах в реагировать - PullRequest
Новая
       17

Вызов функций на вложенных компонентах в реагировать

0 голосов
/ 25 ноября 2018

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

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

Я работаю над портлетом как часть более широкой среды и могу записать сообщение onExport () вдействия.Отсюда я понятия не имею, как лучше всего вызвать вложенный компонент (мне нужен доступ к внутренней ag-сетке во вложенном компоненте, чтобы экспортировать его).

Я рассмотрел вопрос о введении некоторого нового состояния exportRequestedустановите флажок и установите его в редукторе, а затем используйте componentDidReceiveProps во вложенном компоненте.Я также изучал идею «подключения», и это кажется правильным, поскольку это позволило бы мне раскрыть функцию и подключить ее к магазину, но я не могу присоединиться к точкам и выяснить, как вызвать ее изредуктор.Есть ли какой-то способ сортировать действия и перехватывать их непосредственно во вложенном компоненте?

некоторый код:

Контейнер: 

import {initData} from '/actions';

export class MainComponent extends PureComponent {
  static propTypes = {
    initData: func.isRequired,
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentDidMount() {
    this.props.initData();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <ChildGrid data={data} />
      </div>
    );
  }
}

export default connect(
  state => ({
    data: getData(state),
  }),
  { initData }
)(MainComponent);

Вложенная сетка: 

export class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  exportData() {
    // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 25 ноября 2018

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

Реализация такого решения выглядит следующим образом:

ChildGrid.jsx 

class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentWillReceiveProps(newProps) {
      if (newProps.exportRequested) {
          this.exportData();
      }
  }

  exportData() {
    DataGrid.gridApi.exportAsCsv();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
        reduxExportRequested: state.exportRequested
    };
};

export default connect(mapStateToProps)(ChildGrid);
...