JSX语法——区分表达式和语句（代码）

一个简单的JSX语法练习：动态展示一个数组列表中的值。基本效果图如下：

我们知道，在JSX语法规则中，若要展示变量，需用一个大括号{}包裹起来，那么实现上图的一个核心结构就出来啦：

<script type="text/babel"> 
        const originalData = ["Angelar", "React", "Vue"];
        const VDOM = (
            <div>
                <h2>前端js框架列表</h2>
                <ul>
                    {表达式}
                </ul>
            </div>
        );
        // 渲染虚拟DOM在页面上
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

在第13行中，一定得是一个JS表达式，即会产生一个值，比如：

1. 变量或常量a
2. 简单的运算表达式：a+1
3. 函数表达式：func(){}
4. 常见的会返回值的API：arr.map(); arr.concat()等等 而语句一般是：
5. 条件判断语句：if switch
6. 循环 for；forEach

因此，第13行不可直接使用循环完成。我们可以直接使用arr.map(),比如：

{originalData.map((val, idx) => { return <li key = {idx}>{val}</li>})}

或者，利用一个新的变量和循环：

 <script type="text/babel"> 
        const originalData = ["Angelar", "React", "Vue"];
        const newData = [];
        originalData.forEach((val,idx) => {
            newData.push(<li key={idx}>{val}</li>) // jsx中的变量需用大括号括起来
        })
        // 但是循环和条件语句不属于表达式，因此无法直接在VDOM里书写 
        console.log(newData);
        const VDOM = (
            <div>
                <h2>前端js框架列表</h2>
                <ul>
                    {newData}
                </ul>
            </div>
        );
        // 渲染虚拟DOM在页面上
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

二者实现的基本思路都是转换为表达式。

我是进阶小王，一个零基础自学转前端的初学者，希望通过学习和总结实现进阶，与大家共勉！ 参考资料：

1. 尚硅谷React教程（2022加更，B站超火react教程）