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>
react 學習筆記第三次課