React学习（四）之多个组件

Posted on | | Visitors:
Words count in article: 356 字 | Reading time ≈ 2 分

新建组件

在src目录下新建文件夹components，用来存放定义组件的JS代码。

在components文件夹中定义两个组件：Home.js和Header.js，代码几乎和App.js一样，只改变了类名和return的内容。

提示：由于某些原因，之后的代码中可能会有标签匹配出错的问题…..

文件目录结构

注意Header.js、Home.js和App.js在目录中的位置。

新组件文件目录结构.png

Home.js

显示Home字样。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react'; //固定写法

export class Home extends Component { //ES6写法
  render() {
    return (
      <div>
        <h1>Home</h1>
      </div>
    );
  }
}

export default Home;

Header.js

显示Header字样。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react'; //固定写法

export class Header extends Component { //ES6写法
  render() {
    return (
      <div>
        <h1>Header</h1>
      </div>
    );
  }
}

export default Header;

使用组件

在App中使用定义的两个组件，先使用Header，接着显示I am App，接着再使用Home。

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from 'react'; //固定写法
import Header from './components/Header';
import Home from './components/Home';

class App extends Component { //ES6写法
  render() {
    return (
      <div>
        <div>
          <Header />						//注意这里！
        </div>

        <div>
          <h1>I am App</h1>				//注意这里！
        </div>
      
        <div>
          <Home />						//注意这里！
        </div>
      </div>
    );
  }
}

export default App;

效果展示

多个组件效果展示.png

作者：@臭咸鱼

本文为作者原创，转载请注明出处：https://chouxianyu.github.io

欢迎转发和评论!