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道具代替州。

请参阅另一个组件中的状态

1 个答案: