Question

我正在为我的项目使用React。我也在使用react-router-dom库。但是，我对通过react-router-dom传递数据感到困惑。

以下是父组件的代码：

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Path: {
                pathname: "/child/id/1",
                state: {
                    languageChosen: "English"
                }
            }
        };
        this.onChangeLanguage = this.onChangeLanguage.bind(this);
    }
    onChangeLanguage() {
        const { Path } = this.state
        Path.state.languageChosen = 'Spanish'
        this.setState({Path})

    }
    render() {
        return (
            <div>
              <NavLink to={this.state.Path}>ToChild</NavLink>
              <Route
                path={`/child/id/:id`}
                render={props => (
                  <Child {...props} onChangeLanguage={this.onChangeLanguage} />
                )}
              />
            </div>
        );
    }
}

它的状态为Path。父组件将函数onChangeLanguage传递给其子组件。

这里是子组件：

class Child extends Component {
    onChange = () => {
        this.props.onChangeLanguage;
    };
    render() {
        const { languageChosen } = this.props.location.state;
        return (
             <div>
              {languageChosen === "English" ? "English" : "Spanish"}
              <button onClick={this.onChange}>Change Language</button>
            </div>
        );
    }
}

如果单击子组件中的Change Lanuguage按钮，则会调用该函数，并且父组件中的状态也会更改。道具LanguageChosen也将在子组件中更新。

但是，如果刷新页面，则如果按下按钮，则Child中的道具LanguageChosen不会更新。仅当我不刷新页面时才有效。

我该如何解决。谢谢！

Answer 1

出现此问题的原因在这里

const { languageChosen } = this.props.location.state

languageChose从this.props.location设置，URL更改为“ / child / id /：id”时设置位置，刷新页面后，在Parent元素中更改状态，但不会更改位置。状态。而且，我认为您可以在组件中使用道具来解决问题。 1.在路线中设置languageChosen属性

component={props => (
    <Child {...props} onChangeLanguage={this.onChangeLanguage} languageChosen={this.state.Path.state.languageChosen}/>
)}

2。在子组件中更改此

const { languageChosen } = this.props.languageChosen;

Answer 2

此代码让我有些困惑，但是请记住，刷新页面时，所有javascript都重新加载，因此您在父级中将languageChosen硬编码为English，因此每次刷新页面时都会重置到English。您可以将值存储在localStorage中并在刷新时检查其是否存在，也可以将其添加到路由路径child/id/:id/:language

然后，如果您使用的是React Router v4，则在子组件中使用this.props.match.params.language，它将呈现给定的语言。

反应路由器通过数据

2 个答案: