在另一个组件中引用状态

Question

我在组件中设置了如下状态：

class App extends Component {
  constructor(props) {
      super(props)
      this.state = {
        minutes: 3,
        interests: {
          business: false,
          code: false,
          design: false
        }
      }
  }

  render() {
    return (
      <div className="App">
          <div className="content">
          <div className="centered-wrapper">
            <Switch>
              <Route exact path="/" component={Welcome} />
              <Route path="/life" component={Life} />
              <Route path="/work" component={Work} />
              <Route path="*" component={Welcome}/>
            </Switch>
          </div>                
      </div>
    );
  }
}

export default App;

我正在尝试通过以下方式在路由器管理的组件之一中使用状态：

export class Welcome extends Component {

    constructor(props) {
        super(props);
        this.state = {
            errors: []
        };
    }

    render() {
        return (
            <form className="Welcome">
               <input className="minutes" type="number" defaultValue={ this.state.minutes } /> minutes. 
            </form>
        );
    }
}

但是没用。默认情况下状态不是全局的吗？

Answer 1

State 仅在定义它的组件内部可用。如果你想在另一个组件中使用状态，你必须使用 props 来传递它。

要将道具与 Route 一起传递，您可以使用 render 函数。

然后您可以使用以下方式调用您的组件：

<Route exact path="/" render={props => <Welcome {...props} minutes={this.state.minutes} />} />

然后在 Welcome 组件中使用传递的 minutes 属性而不是状态。

在另一个组件中引用状态

Refer to state in another component

jsx

reactjs

react-router