一、组件基本结构
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.属性名}