React组件间状态传递：App类组件state传值给SecondApp遇props未定义问题

嘿，别着急！刚学React的时候踩props的坑太正常了，我来给你捋捋怎么把类组件的state传给SecondApp，顺便帮你排查为啥会出现undefined~

首先，你需要在渲染SecondApp的时候，把state里的属性以键值对的形式作为props传递过去。举个具体的例子，假设你的App组件state是这样的：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 定义你的state
    this.state = {
      username: "小明",
      userAge: 25
    };
  }

  render() {
    // 关键：通过props把state值传给子组件
    return (
      <div className="app-container">
        {/* 这里的user、age是自定义的props名称，对应state里的值 */}
        <SecondApp user={this.state.username} age={this.state.userAge} />
      </div>
    );
  }
}

这里要记住：类组件的state是挂载在实例上的，必须通过this.state.xxx才能访问到具体的状态值，直接写state.xxx会报错哦。

接下来要看你的SecondApp是类组件还是函数组件，两种情况的接收方式不一样：

如果SecondApp是类组件： #

类组件需要通过this.props来访问父组件传递过来的值，比如：

class SecondApp extends React.Component {
  componentDidMount() {
    // 在生命周期里打印props，验证是否拿到值
    console.log(this.props.user); // 应该输出"小明"
    console.log(this.props.age); // 应该输出25
  }

  render() {
    // 渲染时直接用this.props调用
    return (
      <div>
        你好，我是{this.props.user}，今年{this.props.age}岁
      </div>
    );
  }
}

⚠️ 注意：如果你的SecondApp类组件写了构造函数，必须把props传给super，不然在构造函数里访问this.props会是undefined（虽然在render或其他生命周期里还是能拿到，但养成好习惯总是没错的）：

// 正确的构造函数写法
constructor(props) {
  super(props); // 一定要传props！
  // ...其他初始化代码
}

如果SecondApp是函数组件： #

函数组件的props是作为参数直接传入的，写法更简洁：

// 方式1：直接接收props对象
function SecondApp(props) {
  console.log(props.user); // 输出"小明"
  console.log(props.age); // 输出25
  return (
    <div>
      你好，我是{props.user}，今年{props.age}岁
    </div>
  );
}

// 方式2：用解构赋值，更直观
function SecondApp({ user, age }) {
  console.log(user);
  console.log(age);
  return (
    <div>
      你好，我是{user}，今年{age}岁
    </div>
  );
}

• 变量名写错了：比如父组件传的是user={this.state.username}，子组件却去拿this.props.username，名称不匹配肯定拿不到值；
• 没加this.访问state：类组件里直接写user={state.username}，这会把state当成全局变量，自然是undefined；
• 传递props的格式错了：比如写成<SecondApp this.state.username />，这是无效的，必须是属性名={属性值}的键值对形式；
• 在类组件构造函数里没传props给super：如果你刚好多在构造函数里打印this.props，就会看到undefined，换去componentDidMount或者render里打印试试。

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