Jsx中的差值表达式

差值表达式 { }

---

注意：

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>