react的组件有两种写法:
import React from 'react';
class News extends React.Component {
constructor(props) {
super(props) // 用于父子组件传值
}
render () {
return (
<div>
<ul>
<li>
新闻组件
</li>
</ul>
</div>
)
}
}
export default News
Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
class Person {
constructor (name) {
this.name = name;
}
}
class Student extends Person {
constructor (name, age) {
super(); // 用在构造函数中,必须在使用this之前调用
this.age = age;
}
}
为什么官方的列子里面写个super(props):
只有一个理由需要传递props作为super()的参数,那就是你需要在构造函数内使用this.props
那官方提供学习的例子中都是写成super(props),所以说写成super(props)是完全没问题的,也建议就直接这样写。
另一种是:
import React, { Component } from 'react';
class Home extends Component {
constructor() {
super();
// react中定义数据
this.state = {
name: 'react学习之旅',
age: 30,
userInfo: {
username: 'react初学者'
}
}
}
render () {
// return <div>你好react</div>
return (
<div>
<h2>react里面所有节点都要被根节点包含起来</h2>
<p>{this.state.name}</p>
<p>{this.state.age}</p>
<p>{this.state.userInfo.username}</p>
</div>
)
}
}
export default Home;
之后在app.js中引入组件
import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
// import './assets/css/App.css';
// 引入Home组件
import Home from './components/Home'
import News from './components/News'
// render 模版 jsx语法
class App extends Component {
render () {
return (
<div className="App">
<Home></Home>
<News></News>
</div>
);
}
}
export default App;
yarn start 运行项目,即可加载我们的react组件