React-进阶

React--项目引入自定义组件

2019-02-18  本文已影响0人  YI_YI_

1.入口文件在src目录下index.js文件中

入口文件为APP组件,为App.js文件


文件入口.png

2.在APP组件中引入自定义组件

(1)定义自定义组件TestComponent
import React, { Component } from 'react';
class TestComponent extends Component {
  render() {
    return (
      <h1>文字信息</h1>
    )
  }
}

export default TestComponent;
组件目录.png
(2)在App.js中引入组件
import React, { Component } from 'react';
import './App.css';
import TestComponent from './testComponent/testComponent'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>标题</h2>
        <TestComponent></TestComponent>
      </div>
    );
  }
}

export default App;

(3)结果展示:
自定义组件引入成功.png
上一篇 下一篇

猜你喜欢

热点阅读