React如何使用this.state跨组件传值实现页面切换

核心错误原因 #

代码运行不符合预期，本质是对React类组件的状态规则、组件通信逻辑理解有偏差，具体错误点：

• 状态存放位置错误：控制Login/Welcome切换的共享状态放在了Login子组件内，父组件Home无法访问子组件内部state，自然没法触发条件渲染
• setState 用法完全错误：setState是React类组件内置的方法，需要调用传参才能触发视图更新，你写的this.setState = {skipButton: true}是给组件实例挂载了一个普通属性，不会触发任何重渲染
• JSX书写位置错误：事件回调changeSkipPage里写的<Home />JSX没有放在render返回值中，根本不会被渲染到页面
• 根组件缺失：入口文件ReactDOM.render渲染的是<App />，但你的代码里没有定义App组件
• Home组件render方法无返回内容，即使状态正常也不会展示任何元素

正确实现逻辑 #

React中父子组件通信遵循状态提升原则：多个组件需要共享的状态，要存放在最近的共同父组件中，父组件通过props将状态值、修改状态的回调函数传给子组件，子组件触发操作时调用props传来的回调，通知父组件更新状态，父组件状态变化后自动重渲染，完成视图切换。

按照需求，修正后的完整App.js代码如下：

class Login extends React.Component {
  render() {
    return (  
      <div className="p-5">   
        <a 
          className="btn btn-outline-primary"
          onClick={this.props.onSkipLogin}
        >
          <span>Skip Login</span>
        </a> 
      </div>  
    )
  }
}

class Welcome extends React.Component { 
  render() {
    return (  
      <div className="p-5">   
        <h3>Welcome World</h3>
      </div>  
    )
  }
}

class Home extends React.Component {
  constructor(props) {  
    super(props); 
    // 页面切换状态统一存在父组件Home中
    this.state = {
      isSkipped: false
    };
  }

  // 父组件定义修改状态的方法，传给子组件调用
  handleSkip = () => {
    // 正确调用setState方法更新状态，触发重渲染
    this.setState({
      isSkipped: true
    })
  }

  render() {   
    // 条件渲染：根据状态判断展示哪个子组件
    return this.state.isSkipped 
      ? <Welcome />
      : <Login onSkipLogin={this.handleSkip} />
  }
}

// 补全入口依赖的App根组件
class App extends React.Component {
  render() {
    return <Home />
  }
}

关键注意点 #

• 不要在子组件里存放需要被父组件读取的状态，子组件内部状态仅用于组件自身的交互控制
• 永远不要直接给this.state或者this.setState赋值，修改状态必须调用this.setState(新状态对象)
• 所有需要渲染到页面的组件，必须写在对应组件render方法的返回值中
• 组件props是父组件向子组件传值的唯一通道，子组件不能直接修改父组件的状态，只能通过调用父组件传来的回调函数通知父组件自行更新

内容的提问来源于stack exchange，提问作者ferdinand