Question

我在render方法中定义了一个通用组件EcoPoema来重新使用多个路由，当它们切换时，它们会变好但EcoPoema没有更新，因为它没有在里面定义路线并没有重新创建，它重新渲染（componentDidUpdate被调用），但它不知道更新的道具......

我理解发生了什么，我可以通过在每条路线中复制相同的代码来解决这个问题，但这似乎是关闭的，必须有更好的解决方案，对吧？

updateState = (myKey, newState, callbackPromise) => {
    this.setState({
        [myKey] : newState,
    }, () => {
        if (callbackPromise !== undefined){
            callbackPromise();
        }
    })
}

render() {
    let ecoPoema =
        <EcoPoema
            updateState={(nkey, nValue, callbackPromise) => {
                this.updateState(nkey, nValue, callbackPromise)
            }}
            date={this.state[Constants.STATE_FECHA_NACIMIENTO]}
            mail={this.state[Constants.STATE_EMAIL]}
            nif={this.state[Constants.STATE_NIF_NIE]}
            phoneNumber={this.state[Constants.STATE_TELEFONO_CLIENTE]}
            codPostal={this.state[Constants.STATE_CODIGO_POSTAL]}
            capital={this.state[Constants.STATE_CAPITAL_ASEGURAR]}
        />
    return (
        <HashRouter basename={routes.URL_TARI_BASE}>
            <Switch key={HISTORY.location.pathname} pathname={HISTORY.location.pathname}>
                <Route path={routes.STEP_TARI_FECHA_NACIMIENTO}
                    component={props =>
                        {ecoPoema}
                        <ComponentA
                            updateState={(nkey, nValue, callbackPromise) => {
                                this.updateState(nkey, nValue, callbackPromise)
                            }}
                        />
                    }
                />

                <Route path={routes.STEP_TARI_EMAIL}
                    component={(props) =>
                        {ecoPoema}
                        <ComponentB 
                            updateState={(nkey, nValue, callbackPromise) => {
                                this.updateState(nkey, nValue, callbackPromise)
                            }}
                        />
                    }
                    />

                <Route path={routes.STEP_TARI_TELEFONO}
                    component={(props) =>
                        {ecoPoema}
                        <ComponentA />
                    }
                />
            </Switch>
        </HashRouter>
    );
}

Answer 1

您可以将EcoPoema包裹在withRouter HOC 中，这会将其包裹在无路径的Route中。

每次URL路径更改时，都会触发重新呈现组件。

import { withRouter } from 'react-router'

...

let ecoPoema = withRouter(
    <EcoPoema
        ...
    />
)

有关in the docs的更多信息。

使用react-router v4时如何重新执行render方法？

1 个答案: