React学习之旅----新建组件

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组件

React学习之旅----新建组件

猜你喜欢