react 學習筆記第二次課
阿新 • • 發佈：2018-10-04
eve pre kit 插入 color oca html -s doctype
react 第二次課
jsx--變量
jsx--function
component
------------------------------------------
component 組件
寫法
1.class
2.自定義組件
1.class //繼承
class HelloMessage extends React.Component{//組件
render(){
return <h1>hello,{this.props.abc}</h1>
}
};
傳參：通過標簽的自定義屬性傳參
例子： <HelloMessage abc={data.address}/>
獲取參數：例子：{this.props.abc}
------------------------------------------
2.自定義組件
const data = {
address:‘wuhan‘,
obj:{
name:‘sonia‘
}
};
const name = ‘lili‘;
/*自定義組件 需要顯示傳遞props 方法二*/
function Welcome(props){
return <h1>hello,{props.name}</h1>
};
使用：<Welcome name={data.address}/>
註意：自定義函數名 首字母要求大寫！！
------------------------------------------
組件嵌套
下面是代碼展示
<!DOCTYPE html>
<html>
<head>
<title>jSX-function</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>
.lists {
color:#f60;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/*JSX 用於將模板轉為 HTML 語言，並插入指定的 DOM 節點*/
function action(item){
return item.name +‘‘+item.age;
//return item;
};
//var user =‘world123‘;
const user = {
name:‘lili‘,
age:22
};
var element =<h1 className="lists">hello,{action(user)}</h1>
ReactDOM.render(
element,
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">
class HelloMessage extends React.Component{//組件
render(){
return <h1>hello,{this.props.abc}</h1>
}
};
const data = {
address:‘wuhan‘,
obj:{
name:‘sonia‘
}
};
const name = ‘lili‘;
/*自定義組件 需要顯示傳遞props 首字母大寫 方法二*/
function Welcome(props){
return <h1>hello,{props.name}</h1>
};
ReactDOM.render(
<div>
<Welcome name={data.address}/>
{/*<HelloMessage></HelloMessage>*/}
<HelloMessage abc={data.address}/>
</div>,
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 data = {
address:‘wuhan‘,
obj:{
name:‘sonia‘
}
};
const name = ‘lili‘;
/*自定義組件 需要顯示傳遞props*/
function Welcome(props){
return <h1>hello,{props.name}</h1>
};
function App(){/*嵌套*/
return(
<div>
<Welcome name={data.address}/>
<Welcome name=‘list2‘/>
<Welcome name=‘list3‘/>
</div>
);
};
ReactDOM.render(
<App />,
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();
};
function Comment(props){
return(
<div className="list1">
<div>
<img src={props.author.avatarUrl}/>
<p>{props.author.name}</p>
</div>
<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>
react 學習筆記第二次課