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>