React组件

一、组件基本结构

import React ,{Component} from "react";

class Test extends Component {
    constructor(props){
        super(props);
        this.state={

        }
    }
    render() {
        return (
            <div>
                <h2>所有内容都需要在这个div里面</h2>
            </div>
        );
    }
}

export default Test; //暴露这个组件

新建项目基本结构，主要是通过App.js引用其他组件功能如Test.js来展示

引用代码;(在App.js处引用)

import Test from './components/Test';

function App() {
  // html+js
  return (
     <div className="App">
        <Test />
     </div>
  );
}

组件效果

 在return()中写法为HTML+JavaScript

二、定义数据、绑定属性

在构建函数中定义数据

constructor(props){
        super(props);
        this.state={
            username:'11111',
            info:'22222'

        }
    }

在return中引用数据

return (
            <div>
                <h2>所有内容都需要在这个div里面</h2>
                {this.state.info}
                <h4>{this.state.username}</h4>
            </div>
        );

 绑定属性

constructor中定义属性

this.state={
            title:'this is title 属性'
        }

return中引用

<div title={this.state.title}>这是一个div 用于展示绑定属性</div>

 主要是通过 

{this.state.属性名}