react_basic(2)
来源:互联网 发布:淘宝筛选发货地 编辑:程序博客网 时间:2024/06/05 22:49
//react组件
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({ //React.createClass 方法用于生成一个组件类 HelloMessage。自定义的 React 类名以大写字母开头render:function(){
return (<p>hello {this.props.name}</p>);
}
})
ReactDOM.render(
<div>
<HelloMessage name="mmm" />
</div>,
document.getElementById('example') //输出hello mmm
);
</script>
//复合组件
<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return (<div>
<NameMessage name={this.props.name}/> //NameMessage
<LinkMessage link={this.props.link}/> //LinkMessage
</div>);
}
})
var NameMessage = React.createClass({
render:function(){
return (<p>hello {this.props.name}</p>);
}
})
var LinkMessage = React.createClass({
render:function(){
return (<a href={this.props.link}>{this.props.link}</a>);
}
})
ReactDOM.render(
<div>
<HelloMessage name="mmm" link="www.baidu.com"/> //输出: hello mmm www.baidu.com
</div>,
document.getElementById('example')
);
- react_basic(2)
- react_basic(1)
- react_basic(3)
- react_basic(4)
- react_basic(5)
- react_basic(7)
- react_basic(6)
- react_basic(8)
- react_basic(9)
- react_basic(10)
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- 2
- MYSQL数据导入ORACLE
- 范数
- 类中成员函数的实现,放在类块里和外部实现的区别
- Struts2概述
- ubuntu下qt无法加载qmldesigner qmlprofiler welcome
- react_basic(2)
- Struts2的数据校验
- [DeeplearningAI笔记]改善深层神经网络_优化算法2.6_2.9Momentum/RMSprop/Adam优化算法
- Loadrunner windows socket 协议 1
- SMBconnection类使用
- unit15
- 让Android的webview支持H5的图片上传,无需原生开发功能
- CentOS7 软件源
- 基础练习 数列特征