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

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

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

母减速器：

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;

第四个减速器：

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 级子级。因此，当您的化简器更新全局状态(存储(时，连接的组件将重新渲染并采用更新的状态，就像在 props 中一样。

Answer 2

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