41 lines
1.5 KiB
Markdown
41 lines
1.5 KiB
Markdown
---
|
||
title: Write a React Component from Scratch
|
||
localeTitle: 从Scratch写一个React组件
|
||
---
|
||
## 从Scratch写一个React组件
|
||
|
||
在这个挑战中,我们想要创建一个`class`反应组件(React组件可以是`class`组件或`function`组件)。我们所有的类组件都将成为`React.Component`的扩展。例如,我们可以开始创建一个名为`FirstComponent`的组件:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
|
||
};
|
||
```
|
||
|
||
我们还需要确保为新类定义`constructor` 。最好使用`super`调用任何组件的`constructor` ,并将`props`传递给它们。 `super`拉取组件父类的`constructor` (在本例中为`React.Component` )。现在,我们组件的代码如下所示:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
};
|
||
```
|
||
|
||
现在剩下要做的就是定义我们的组件将`render` !我们通过调用组件的`render`方法并返回我们的JSX代码来实现:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
render() {
|
||
return (
|
||
// The JSX code you put here is what your component will render
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
一旦你的JSX代码在那里,你的组件就完成了!如果你想要一个更精细的React组件教程,那么Samer Buna [写了一篇很棒的文章](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) 。 |