可以访问简单的反应状态，但不能访问道具

Question

我是React的新手，所以修复起来可能很简单，但我无法访问ReviewsTotalStars.js文件中的｛this.props.AvgRating｝。我必须使用以下状态代码来访问一个名为ratingStars:的变量

this.state = {
ratingStars: 3.5
};

但我不想使用上面的评分星，而是更喜欢使用道具。平均评级。为什么我不能访问它？这是我的简单代码：

index.js:

import React, { Component } from "react";
import { render } from "react-dom";
import ReviewsLeftArea from "./ReviewsLeftArea";
import "./style.css";
const avgRating = 3.5;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<ReviewsLeftArea AvgRating={avgRating} />
</div>
);
}
}
render(<App />, document.getElementById("root"));

ReviewsLeftArea.js:

import React from "react";
import ReviewsTotalStars from "./ReviewsTotalStars";
export default class ReviewsLeftArea extends React.Component {
render() {
return (
<div>
<ReviewsTotalStars avgRating={this.props.AvgRating} />
</div>
);
}
}

ReviewsTotalStars.js:

import React from "react";
export default class ReviewsTotalStars extends React.Component {
constructor() {
super();
this.state = {
ratingStars: 3.5
};
}
render() {
return (
<div>
{this.state.ratingStars} works but this {this.props.AvgRating} doesn't
</div>
);
}
}

感谢您的帮助和解释。

Answer 1

在ReviewsTotalStars中，您想要访问：

this.props.AvgRating

但实际上是：

this.props.avgRating

顺便说一下，你不应该有一个以大写字母开头的道具

Answer 2

应该很容易修复，在react中，您永远不应该在正在处理的类之外创建可用项，相反，您应该将它们添加到状态对象中，如下所示：

Index.js:

import React, { Component } from "react";
import { render } from "react-dom";
import ReviewsLeftArea from "./ReviewsLeftArea";
import "./style.css";
// const avgRating = 3.5;
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
avgRating: 3.5;
};
}
render() {
return (
<div>
<ReviewsLeftArea AvgRating={this.state.avgRating} />
</div>
);
}
}
render(<App />, document.getElementById("root"));

ReviewsTotalStars.js:

import React from "react";
export default class ReviewsTotalStars extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div>
{this.props.avgRating} //now this should work
</div>
);
}
}