React中JSX的简单使用（一）

React语法

1、初次尝试渲染节点

<div id="root"></div>
<script type="text/babel>
ReactDOM.render(
<h1> hello world！</h1>
,document.getElementById("root"))
</script>

2、渲染组件

定义组件时：

1. 组件的开头必须为大写；
2. return 中只能有一个根元素；
3. 标签元素要闭合。

<div id="root"></div>
<script type="text/babel>
const Welcome = ()=>{
return <h1> Welcome to learn react</h1>
}
ReactDOM.render(
<Welcome></Welcome>,
document.getElementById("root"))
</script>

1. 我想加入多个元素，怎么办呢？

   1. 为根元素 加（），防止编译被截断
   2. 在多个标签的外部增加一个 div。

const Welcome = ()=>{
return (
	<div>
		<h1>hello</h1>
		<h1>Welcome to learn React</h1>
	</div>
	)
}

2. 那我想组件中是通过传参展示的呢？

使用props

<div id="root"></div>
<script type="text/babel>
const Welcome = ()=>{
return(
	<div>
		<h1>hello {this.props.name}</h1>
		<h1>Welcome to learn React{this.props.content}</h1>
	</div>
	)
}
ReactDOM.render(
<Welcome name='zhangsan' content="Congratulations！"></Welcome>,
document.getElementById("root"))
</script>

3. 如果获取组件中的包含闭合标签的值呢

• 固定语法：{ this.props.children }

const Welcome = ()=>{
return(
	<div>
		<h1>hello {this.props.name}</h1>
		<h1>Welcome to learn React{this.props.content}</h1>
		{this.props.children}
	</div>
	)
}
ReactDOM.render(
<Welcome name='zhangsan' content="Congratulations！">
	<h3>1111</h3>
</Welcome>,
document.getElementById("root"))

4. 如果获取的是一个方法呢？

   在element中调用这个方法。
   

<div id="root"></div>
<script>
function formatName(user){
	return user.firstName + '' + user.lastName;
}
const user = {
	firstName:'Zhang',
	lastName:'san'
};
const element = {
	<h1>
		Hello,{formatName(user)}
	</h1>
}
ReactDOM.render(
element,
document.getElementById("root"));
</script>

5. 如果想要获取一个表达式呢？

• 也是通过function

function getGreeting(user){
	if(user){
		return <h1>Hello,{formatName(user)}!<h1>;
	}
	return <h1>Hello,Stranger,</h1>;
}