react 学习笔记第三次课
react 第三次课
props 属性
state 状态 是可以被改变的
（私有的，不可以通过外部访问和修改，在组件内部修改，导致组件会重新render）
----------------------------------------------------------
感觉挺简单的
props 属性（传参 取值 父传给子）
----------------------------------------------------------
state 状态
class HelloMessage extends React.Component{
/*组件内部*/
/*状态内部写 下面用了这个name*/
static defaultProps = {
name:'12345'
}
render(){
return <h1>hello,{this.props.name}</h1>
}
};
----------------------------------------------------------
props.children
获取子节点的东西，可以用来遍历
<!DOCTYPE html>
<html>
<head>
<title>props.children</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class HelloMessage extends React.Component{
render(){
console.log(this.props.children)
return (
<ul>
{
this.props.children.map(function(item,index){
return <li key={index}>hello,{item}</li>
})
}
</ul>
);
}
};
const data = {
address:'wuhan',
obj:{
name:'sonia'
}
};
ReactDOM.render(
<HelloMessage>
<span>a</span>
<span>b</span>
<span>c</span>
</HelloMessage>,
document.getElementById('example')
);
</script>
</body>
</html>
----------------------------------------------------------
class嵌套
<!-- super(props); 子类调用父类构造器 Component(props)
constructor 构造函数
super()关键字 父类/子类继承的一种方式
-->
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>component</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class HelloMessage extends React.Component{
/*组件内部*/
static defaultProps = {
name:'12345'
}
render(){
return <h1>hello,{this.props.name}</h1>
}
};
const data = {
address:'wuhan',
obj:{
name:'sonia'
}
};
/*组件外部*/
HelloMessage.defaultProps = {
name:'abcabc'
}
ReactDOM.render(
<HelloMessage name="lili"/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>component--组合（嵌套）</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
function formatDate(d){
return d.toLocaleDateString();
};
/*img*/
function Img(props){
return <img src={props.infoSrc.avatarUrl}/>
}
/*author*/
function Author(props){
return(
<div>
<Img infoSrc={props.info}/>
<p>{props.info.name}</p>
</div>
)
};
function Comment(props){
return(
<div className="list1">
<Author info={props.author}/>
<div>{props.text}</div>
<div>{formatDate(props.date)}</div>
</div>
)
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>props.children</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class HelloMessage extends React.Component{
render(){
console.log(this.props.children)
return (
<ul>
{
this.props.children.map(function(item,index){
return <li key={index}>hello,{item}</li>
})
}
</ul>
);
}
};
const data = {
address:'wuhan',
obj:{
name:'sonia'
}
};
ReactDOM.render(
<HelloMessage>
<span>a</span>
<span>b</span>
<span>c</span>
</HelloMessage>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>component</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function Sub(props){
return <p>{props.name}</p>
};
class HelloMessage extends React.Component{
render(){
return (
<div>
<h1>hello,{this.props.name}</h1>
<Sub name='123'/>
</div>
)
}
};
ReactDOM.render(
<HelloMessage name="lili"/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>component</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="example"></div>
<!-- super(props); 子类调用父类构造器 Component(props)
constructor 构造函数
super()关键字 父类/子类继承的一种方式
-->
<script type="text/babel">
class HelloMessage extends React.Component{
constructor(props){
super(props);
this.state ={
name:'123'
}
}
render(){
return (
<div>
<h1>hello,{this.state.name}</h1>
<h1>hello,{this.props.name}</h1>
</div>
)
}
};
ReactDOM.render(
<HelloMessage name="lili"/>,
document.getElementById('example')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>state 生命周期</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor(props, context) {
super(props, context);
this.state = {
opacity: 1.0
};
}
componentDidMount () {
this.timer = setInterval(()=> {
var opacity1 = this.state.opacity;
opacity1 -= .05;
if (opacity1 < 0.1) {
opacity1 = 1.0;
}
this.setState({
opacity: opacity1
});
}, 100);
}
render () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
};
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
</script>
</body>
</html>
