React 插值表达式
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 相当于react.js -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 相当于react-dom.js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
<!-- 相当于JSX -->
<div id="root"></div>
<script>
</script>
<script>
</script>
<script type="text/babel">
let data = {
name:"白鼬鼬", age:18 }; ReactDOM.render(
< header>
< h1> hello {
data.name}{
data.age}
< /h1>
< p> l里用Jsx来渲染
< /p>
< / header> , document.querySelector("#root"), () => {
console.log("渲染成功") } )
</script>
React 条件输出
<!--
<!-- ? : 类似 if...else
|| 类似 if(!) 取反
&& 类似 if() -->
<script type="text/babel">
let data = {
name:"白鼬鼬", age:18 }; ReactDOM.render(
< header>
< h1> hello {
false ? "成立" : "不成立"}
< /h1>
< p> {
true||l里用Jsx来渲染}
< /p>
<div>{
true&&"正确"}</div>
< / header> , document.querySelector("#root"), () => {
console.log("渲染成功")} )
</script>
React 列表循环
<!-- v-for -->
<!-- function taData(){
let arr = []; } 存放内容 -->
<script type="text/babel">
let data = ["内容1","内容2","内容三","内容似"]; function taData(){
let arr = []; data.forEach(item=>{
arr.push(
<li>{
item}</li>) }); return arr; } ReactDOM.render(
< header>
{
taData() }
< / header> , document.querySelector("#root"), () => {
console.log("渲染成功")} )
</script>