我正在尝试从 General 类中获取函数 Application 中的“状态”对象，并且收到此错误“未捕获的类型错误：无法读取未定义的属性“状态””。代码是
class General extends Comment {
constructor() {
super();
this.state = { comments: first_comment};
}
}
const Application = () => {
return (
<div> Hello world beginner: {this.state.comments}</div>
);
};
render(<Application/>, document.getElementById('container'));
应用程序是无状态组件。并不是说箭头函数具有上下文的词汇范围。
对无状态组件使用 props。
const Application = (props) => {
return (
<div> Hello world beginner: {props.comments}</div>
);
};
或者扩展 React.Component
class Application extends React.Component {
constructor() {
// init state
}
render() {
return <div> Hello world beginner: {this.state.comments}</div>
}
}
一些事情：
*Stateless Functional Components没有state，lifecycle方法和this关键字。
*您需要连接General和Application组件，以便Application组件可以state使用 General的值component。
* 将Application组件设为 General 组件的子组件props，并在 中传递注释值，并通过Application访问该值props.comments。
像这样写：
class General extends Component {
constructor() {
super();
this.state = { comments: first_comment};
}
render(){
return (
<div>
<Application comments={this.state.comments}/>
</div>
)
}
}
const Application = (props) => {
return (
<div> Hello world beginner: {props.comments}</div>
);
};
render(<General/>, document.getElementById('container'));
检查工作示例：
class General extends React.Component {
constructor() {
super();
this.state = { comments: 'first_comment'};
}
render(){
return (
<div>
<Application comments={this.state.comments}/>
</div>
)
}
}
const Application = (props) => {
return (
<div> Hello world beginner: {props.comments}</div>
);
};
ReactDOM.render(<General/>, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='container'/>在您的类组件中，您应该扩展或子类化React.Component，当您这样做时，这意味着您将使用类组件中的constructor()功能覆盖React.Component类的功能General，但您不想这样做，您仍然想访问React.Component constructor()所以你需要传递props给构造函数和super().
接下来，当将 state 作为 props 传递给功能组件时，您需要props作为参数传递给功能组件，否则在执行此操作时，例如：
import React from 'react';
const ImageList = () => {
console.log(props.images);
return <div>ImageList</div>;
};
export default ImageList;
你会得到同样的错误。想象一下，我试图从General基于类的组件访问状态到ImageList上面的这个组件，并且我确实将它导入到General，它会给我同样的错误，因为我没有props作为参数传递给ImageList功能组件。