this
in stateless functional components JS-0452this
111 }).extend({
112 addAttributes() {
113 return {
114 ...this.parent?.(),115 target: { default: null },
116 };
117 },
this
124 TableCell.extend({
125 addAttributes() {
126 return {
127 ...this.parent?.(),128 backgroundColor: {
129 default: undefined,
130 renderHTML: (attributes) => ({
this
98 Image.extend({
99 addAttributes() {
100 return {
101 ...this.parent?.(),102 width: { default: null },
103 };
104 },
Attempting to access properties on this
can sometimes be valid. But most of the time, it is an error caused by unfamiliarity with the differences between the two styles of components or a missed reference when converting a class component to an SFC.
this
is commonly used in stateful components to access the component's data like properties, states, methods, etc. Using this
in the non-stateful component to access these data will throw runtime errors as these would be undefined
.
In React, there are two types of components, i.e.,
Class Component
It is called a stateful component as they tend to implement logic, and you can access props using this.props
and state using this.state
.
Functional Component
It is also considered as Stateless Functional Components(SFCs), there's no state (hence the name - hooks do not change this), and the props and context are provided as its two functional arguments.
In an SFC, the state is usually best implemented with a React hook such as React.useState()
.
function Card(props) {
return (
<div>{this.props.heading}</div>
);
}
// Example 2
function Card(props) {
const { heading } = this.props;
return (
<div>{heading}</div>
);
}
function Card(props) {
return (
<div>{props.heading}</div>
);
}
// Example 2
function Card(props) {
const { heading } = props;
return (
<div>{heading}</div>
);
}