自学React使用标签式语法无法访问组件state问题求助

嘿，我看了你的代码，问题主要出在几个细节上，咱们一个个掰扯清楚：

1. 函数组件的参数顺序完全搞反了 #

你写的AView和BView是函数组件，这类组件的第一个参数永远是props，根本没有单独的state参数！你把state放在第一个位置，自然拿不到正确的值。而且类组件的state是属于类本身的，函数组件要用到类组件的state，必须通过props传进去。

2. 类组件的render方法不需要额外加参数 #

类组件的render()方法里，要访问自身的props和state，得用this.props和this.state。你给render加(props, state)参数是没用的，React根本不会给这个方法传入这些参数。

3. B组件的state传递逻辑缺失（从你写的半截代码看） #

你在AView里用了<B />，但B类组件的state没传递给BView，而且BView也犯了和AView一样的参数顺序错误。

修正后的完整代码示例： #

import React, { Component } from 'react';

// 函数组件第一个参数是props，从props里取a
const AView = (props) => (
  <div>
    <p>{props.a}</p>
    <B />
  </div>
);

class A extends Component {
  constructor() {
    super();
    this.state = { a: 1 };
  }

  render() {
    // render里用this.state获取类组件的state，传给AView的props
    return <AView a={this.state.a} />;
  }
}

// BView同样从props里取b
const BView = (props) => (
  <div>
    <p>{props.b}</p>
  </div>
);

class B extends Component {
  constructor() {
    super();
    this.state = { b: 2 }; // 补全state定义
  }

  render() {
    // 把B组件的state.b传给BView的props
    return <BView b={this.state.b} />;
  }
}

额外小提示： #

如果是函数组件想拥有自己的state，应该用React的useState Hook，举个简单例子：

import React, { useState } from 'react';

const AView = () => {
  const [a, setA] = useState(1);
  return <div><p>{a}</p></div>;
};

不过从你的代码结构看，你是想用类组件管理state，再传给函数式的视图组件，那严格遵循props传递的逻辑就好啦。

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