如何将函数作为支持传递给2个嵌套/子组件？

Question

我有这个父组件：

filtersModal.js

// imports

class FiltersModal extends React.Component {
  state = { carrier: '' };

  applyFilters = () => {
    const { carrier } = this.state;
    applyFilters({ carrier });
  };

  handleChange = field => ev => {
    this.setState({ [field]: ev.target.value });
  };

  render() {
    return (
      <Modal
        open={isFiltersModalOpened}
        onRequestSubmit={this.applyFilters}
      >
        <Form>
           <GetAllCouriers handleCouriers={this.handleChange('carrier')} />
        </Form>
      </Modal>
    );
  }
}

FiltersModal.propTypes = {
  t: PropTypes.func.isRequired,
  isFiltersModalOpened: PropTypes.bool.isRequired,
  toggleFiltersModal: PropTypes.func.isRequired,
  applyFilters: PropTypes.func.isRequired,
};

export default translate()(FiltersModal);

我还有另一个组件，它是上述组件的子组件：

getAllCouriers.js

// other imports
import CouriersSelect from '../CouriersSelect';

const GetAllCouriers = ({ t, softlayerAccountId, handleCouriers }) => (
  <Query query={GET_ALL_COURIERS}>
    {({ loading, error, data }) => {
      let getAllCouriers;

      if (data && data.GetAllCouriers) {
        getAllCouriers = data.GetAllCouriers;
      }

      return (
        <CouriersSelect
          allCouriersList={getAllCouriers}
          onChange={handleCouriers}
        />
      );
    }}
  </Query>
);

GetAllCouriers.propTypes = {
  t: PropTypes.func.isRequired,
  softlayerAccountId: PropTypes.string.isRequired,
};

export default compose(
  connect(store => ({
    softlayerAccountId: store.global.softlayerAccountId,
  })),
  translate(),
)(GetAllCouriers);

这是该组件的右上方的子组件，其中包含处理道具handleCouriers的onChange函数。

couriersSelect.js

// imports

const CouriersSelect = ({ t, handleCouriers, allCouriersList }) => (
  <Select onChange={handleCouriers}>
    {allCouriersList.map(carriers => (
      <SelectItem
        key={carriers.name}
        value={carriers.name}
        text={carriers.name}
      />
    ))}
  </Select>
);

CouriersSelect.propTypes = {
  t: PropTypes.func.isRequired,
  allCouriersList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  handleCouriers: PropTypes.func.isRequired,
};

export default translate()(CouriersSelect);

我有一些不同的组成部分，我需要通过handleChange上功能FiltersModal.js

  handleChange = field => ev => {
    this.setState({ [field]: ev.target.value });
  };

这些组件之一是getAllCouriers.js ，我需要在其中运行它。 正如你看到的， getAllCouriers.js叫上filtersModal.js不过onChange功能存在于couriersSelect.js 。 所以这个功能必须从旅行couriersSelect.js这是一个孩子getAllCouriers.js和getAllCouriers.js是一个孩子filtersModal.js 。

我能做什么？

Answer 1

让您在最重要的组件中发挥作用，并通过以下函数进行传递：

<GetAllCouriers handleCouriers={() => this.handleChange('carrier')} />

希望这能回答您的问题