差值表达式 { }
注意:
jsx:当遇到小写字母标签时,会作为普通标签。当遇到首字母大写的标签会认为是组件。当遇到{}时,内部会作为 逻辑去处理。
差值表达式可以书写 函数 和 表达式,不能书写 for 循环
解析变量
<div id="root"></div>
<script type="text/babel">
const str = "花括号";
ReactDOM.render(<div>{
str}</div>, document.querySelector("#root"));
</script>
遇到首字母大写,解析为组件,没有定义组件报错
<div id="root"></div>
<script type="text/babel">
// 报错 Uncaught ReferenceError: Div is not defined
ReactDOM.render(<Div>{
str}</Div>, document.querySelector("#root"));
</script>
三元表达式
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<div>{
1 === 1 ? "美好" : "好美"}</div>, document.querySelector("#root"));
</script>
书写方法
<div id="root"></div>
<script type="text/babel">
const str = "快又好";
ReactDOM.render(<div>{
str.split("").reverse().join("")}</div>, document.querySelector("#root"));
</script>
属性使用数据
<div id="root"></div>
<script type="text/babel">
const imgUrl = "https://www.youidear.com/data/attachment/forum/201910/29/204029ig81t111c1nc0cbt.jpg";
ReactDOM.render(<div><img src={
imgUrl}/></div>, document.querySelector("#root"));
</script>
拼接
<div id="root"></div>
<script type="text/babel">
// 拼接
const imgUrl = "/data/attachment/forum/201910/29/204029ig81t111c1nc0cbt.jpg";
ReactDOM.render(<div><img src={
"https://www.youidear.com" + imgUrl}/></div>, document.querySelector("#root"));
</script>