如何在 React 中将 componentDidMount 函数传递到深层 children

Question

我对将 componentDidMount 函数从 parent 传递到深层 child 有疑问。我有一个项目列表，这些项目是按项目状态选择的。在我更改其中一项的状态后，我需要 re-render parent 来获取新数据。对我来说棘手的部分是，我找不到方法，如何传递 componentDidMount 函数或操作来再次获取我的列表数据。

我的parentclass:

class Page extends React.Component {
  componentDidMount() {
    this.props.onCompMount();
  }

  render() {
    const { error, loading, list } = this.props;

    const pageListProps = {
      loading,
      error,
      list,
    };

    return (
      <article>
        <div>
          <PageList {...pageListProps} />
        </div>
      </article>
    );
  }
}

我的第一个 child:

function PageList({ loading, error, list }) {
  if (loading) {
    return <List component={LoadingIndicator} />;
  }

  if (error !== false) {
    const ErrorComponent = () => (
      <ListItem item="Something went wrong, please try again!" />
    );
    return <List component={ErrorComponent} />;
  }

  if (list !== false) {
    return <List items={list} component={PageItem} />;
  }
  return null;
}

第 2 child:

export class PageItem extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false,
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({ modalIsOpen: true });
  }

  closeModal() {
    this.setState({ modalIsOpen: false });
  }

  render() {
    const { item } = this.props;

    // Put together the content of the repository
    const content = (
      <Wrapper>
        <h3>{item.title}</h3>
        <button onClick={this.openModal}>Decline</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Preview"
        >
          <Form close={this.closeModal} />
        </Modal>
      </Wrapper>
    );

提交到 re-render parent 容器后我想要的最后一个 child 位置：

export class Form extends React.Component {

  render() {
    return (
      <article>
        <form
          onSubmit={e => {
            e.preventDefault();
            this.props.submit();
            this.props.close();
            //Somehow re-render parent
          }}
        >
          <div className="row" style={{ textAlign: 'start' }}>
            Do you really want to change status?
            <div className="col-md-12 buttonContainer">
              <ButtonA
                label="Submit"
                style={{ width: '50%' }}
                primary
                type="submit"
              />
            </div>
          </div>
        </form>
      </article>
    );
  }
}

我尝试过使用 window.location.reload(); 重新加载页面并且它有效。但我认为 React 是不好的做法。也许有人可以建议我如何让它变得更好？

编辑：我正在添加 parent 减速器和第 4 个 child 减速器。

Parent 减速机：

const initialState = fromJS({
  loading: false,
  error: false,
  listData: {
    list: false,
  },
});

function pageReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_LIST_BEGIN:
      return state
        .set('loading', true)
        .set('error', false)
        .setIn(['listData', 'list'], false);
    case FETCH_LIST_SUCCESS:
      return state
        .setIn(['listData', 'list'], action.list)
        .set('loading', false);
    case FETCH_LIST_FAILURE:
      return state.set('error', action.error).set('loading', false);
    default:
      return state;
  }
}

export default pageReducer;

第 4 个 child 减速器：

const initialState = fromJS({});

function formReducer(state = initialState, action) {
  switch (action.type) {
    case SUBMIT:
      return state;
    default:
      return state;
  }
}

export default formReducer;

Answer 1

只需将 this.props.onCompMount() 作为 props 传递给子组件，然后在每次更新时在子组件中调用它。

Answer 2

我们使用 Redux 或 React 的新 Context API 来避免 react 中的 prop drilling 问题。在您的使用中，您可以从父组件调度操作并将相关的减速器连接到您的第 4 级子组件。因此，当你的 reducer 更新全局状态（store）时，你的连接组件将重新渲染并采用更新后的状态，就像在 props 中一样。

如何在 React 中将 componentDidMount 函数传递到深层 children

How to pass componentDidMount function to deep layer children in React

reactjs

react-redux

react-boilerplate