如何将componentDidMount函数传递给React中的深层子级

Question

我对将 componentDidMount 函数从父级传递给深层子级有疑问。 我有一个项目列表，由项目状态选择。更改其中一项的状态后，我需要重新渲染父项以获取新数据。对我来说棘手的部分是，我找不到方法，如何传递 componentDidMount 函数或操作来再次获取我的列表数据。

我的父类：

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

我的第一个孩子：

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

第二个孩子：

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

提交后我想要重新渲染父容器的最后一个孩子：

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 是不好的做法。也许有人可以建议我如何让它变得更好？

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

父级减速器：

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 个子减速器：

const initialState = fromJS({});

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

export default formReducer;

Answer 1

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

Answer 2

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