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

这是组件上方的子组件，其中包含处理道具onChange的{{1}}函数

couriersSelect.js

handleCouriers

我有一些不同的组件需要在// 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的子代。

我该怎么办？

Answer 1

让您在最重要的组件中发挥作用，并通过这样的Pass函数：

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

希望这能回答您的问题

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

1 个答案: