如何将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中的属性钻取问题。在您的使用中，您可以从父组件中分派操作，并将相关的减速器连接到您的第四级子项。因此，当你的reducer更新全局状态(store)时，你连接的组件将重新渲染，并像在props中一样采用更新的状态。

Answer 2

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