在与Typescript使用React时，This.props.xxx是不确定的，但在ES5中正常工作

Question

最近我开始学习与ES5进行React React，但现在尝试使用类型 我的应用程序中的脚本。谁能告诉我为什么我不能打印 使用 {this.props.people} 的值 使用 {this.state.people}。我以此网站为例。 请建议我这里缺少什么？

网站

import * as React from 'react';
class About extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        console.log(About);
        const people = [];
        for (let i = 0; i < 10; i++) {
            people.push({
                name: i,
                country: i + i
            });
        }
        this.state = {people};
    }
    public render() {
        return (
            <div>
            {this.props.people.map((person: any, index: number) => (
                <p key={index}>Hello, {person.name} from {person.country}!</p>
            ))}
        </div>
        );
    }
}
export default About;

Answer 1

，因为当您的父部件发送人员道具时， this.props.people是填充的东西。this.state.people是可以访问的，因为您将其设置在构造函数中。

它与ES5或ES6无关。顺便说一句，您正在使用箭头功能中的ES6。

class Parent extends React.Component {
  render(
    return (
      <Child people=[1, 2, 3] />
    )
  )
}
class Child extends React.Component {
  constructor(props) {
    this.state = {
      people: [5, 6, 7]
    }
  }
  render() {
    return ( 
      <div>
        {this.props.people} // Will render [1, 2, 3], coming from Parent
        {this.state.people} // Will render [5, 6, 7], coming from Constructor
      </div>
    )
  }
}

Answer 2

这是因为在您的示例中，人们的道具永远不会传递，它只是在构造函数中生成并设置为状态，您必须使用this.state.state.people。<<<<<<<<<</p>

如果要使用道具，则必须通过父组件传递人员。查看组件 - 开发文档