react组件1
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <div>aaa</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>
react组件2
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
this.a=12;
}
render(){
return <div>
a={this.a}
</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>
react组件3
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
}
fn(){
return 55+88;
}
render(){
return <div>
a={this.fn()}
</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>
react组件4
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
}
render(){
let a=12;
let name='blue';
let age=18;
return <div>
姓名:{name},年龄:{age}
</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>
react组件5
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
}
fn(){
return 55+88;
}
render(){
let url='https://www.baidu.com/img/baidu_jgylogo3.gif';
return <div>
a={this.fn()}
<img src={url} />
</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>
react组件6
<div id="root"></div>
<script type="text/babel">
//写组件
class Cmp1 extends React.Component{
constructor(...args){
super(...args);
}
fn(){
return 55+88;
}
render(){
let name="blue";
return <div>
传进去是string=>"name"
<span title="name">sss</span>
传进去是变量=>name
<span title={name}>sss</span>
</div>;
}
}
//用组件
let root=document.getElementById('root');
ReactDOM.render(<Cmp1></Cmp1>, root);
</script>