React生成组件类
2016-09-29 15:04
381 查看
1、问题背景
利用React生成组件类，并显示类中属性以及属性值
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React生成组件类</title>
<script type="text/javascript" src="../js/react.js" ></script>
<script type="text/javascript" src="../js/react-dom.js" ></script>
<script type="text/javascript" src="../js/browser.min.js" ></script>
<script type="text/babel">
var Person = React.createClass({
render:function(){
return <h3>姓名：{this.props.username},年龄：{this.props.age}</h3>
}
});
ReactDOM.render(
<Person username="胡立新" age="23"/>,
document.getElementById("per")
);
</script>
</head>
<body>
<div id="per"></div>
</body>
</html>
3、实现结果
利用React生成组件类，并显示类中属性以及属性值
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React生成组件类</title>
<script type="text/javascript" src="../js/react.js" ></script>
<script type="text/javascript" src="../js/react-dom.js" ></script>
<script type="text/javascript" src="../js/browser.min.js" ></script>
<script type="text/babel">
var Person = React.createClass({
render:function(){
return <h3>姓名：{this.props.username},年龄：{this.props.age}</h3>
}
});
ReactDOM.render(
<Person username="胡立新" age="23"/>,
document.getElementById("per")
);
</script>
</head>
<body>
<div id="per"></div>
</body>
</html>
3、实现结果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- react循环多个相同的组件需要生成唯一key
- react---react router4.0路由中如何异步动态加载组件，webpack使用require.ensure()生成异步chunk
- 使用React.js生成基本组件
- React使用antd Table生成层级多选组件
- React组件生命周期
- react学习笔记 item7 --- 组件的生命周期
- 在组件使用react-router,和redux的注意事项
- react 组件
- React高阶组件原理与在Redux中的实践
- react生成的表单不能键入问题的解决
- react爬坑之通过条件渲染控制组件的渲染与否
- react项目的组件库antd-mobile
- 用React+Mobx到底该不该写一个CheckBox组件
- 《React-Native系列》16、 RN组件之ListView
- React Native组件的生命周期
- 《React-Native系列》38、 ReactNative混合组件封装
- 无组件生成BMP验证码
- React第三方组件2(状态管理之Refast的使用③扩展ctx)
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- 验证码生成组件--JCaptcha的使用