React学习

最新推荐文章于 2021-06-30 22:31:28 发布

你惊艳了我的时光

最新推荐文章于 2021-06-30 22:31:28 发布

阅读量259

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/CuteBaby_csdn/article/details/55259169

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Demo01

Demo02

<!DOCTYPE html>

<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id = "example"></div>
<script type = "text/babel">
var arr = ['ypf','hzl'];
ReactDOM.render(
<div>
{
arr.map(function(arr){
return <div>Hello,{arr}</div>
})
}</div>,
document.getElementById('example')
);
</script>
</body>
</html>
<!--体现了JSX的基本语法规则，遇到HTML标签，用HTML规则解析；遇到代码块，用JavaScritp规则解析。
JSX允许在模板插入JavaScript变量。如果变量是一个数组，则会展开这个数组的所有成员。
--!>

Demo03

Demo04

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id = "example"></div>
<script type = "text/babel">
var List = React.createClass({
render: function(){
return(
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ol>
);
}
})
ReactDOM.render(
<List>
<span>ypf</span>
<span>hzl</span>
</List>,
document.getElementById('example')
);
</script>
</body>
</html>

<!--
当前对象的属性this.props与组件实例的属性是一致的，组件实例的span属性通过组件类中的this.props.children属性获取，可是呢，this.props.children比较特殊
的是：1）当组件实例没有子节点，是undefined;2）有一个子节点，数据类型是object;3）有多个子节点，数据类型是array。
--!>

Demo05

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id = "example"></div>
<script type = "text/babel">
var Title = React.createClass({
propTypes:{
title: React.PropTypes.string.isRequired,
},

render: function(){
return <h1>{this.props.title}</h1>;
}
});

ReactDOM.render(
<Title title = 'ypf'></Title>,
document.getElementById('example')
);
</script>
</body>
</html>

<!--
组件实例的属性可以接受任何类型的值，如：字符串，对象，函数，整数；如果是验证别人使用组件时，需要用到PropTypes属性，来验证
组件实例的属性是否符合验证要求，如果不符合要求的话，控制台会报错。
--!>

Demo06

Demo07

Demo08

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>
<!--组件实例的方法getInitialState：定义初始状态，用户点击组件，使this.setState状态发生改变；每次修改自动调用render方法--!>

Demo09

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Hello name="world"/>,
document.body
);
</script>
</body>

<!--hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成

style="opacity:{this.state.opacity};"
而要写成

style={{opacity: this.state.opacity}
--!>

你惊艳了我的时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习

Demo01var NodesList = React.createClass({render:function() {return ({React.Children.map(this.props.children,function(child){return {child};})});}});Re
复制链接

扫一扫