从零一起学react(2)---JSX语法进阶

最新推荐文章于 2022-01-18 19:15:33 发布

buppt

最新推荐文章于 2022-01-18 19:15:33 发布

阅读量761

点赞数 1

分类专栏： react 从零一起学react 文章标签： react JSX语法

本文链接：https://blog.csdn.net/buppt/article/details/78188706

版权

react 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

从零一起学react

8 篇文章 1 订阅

订阅专栏

JSX语法进阶

1.JSX元素需闭合

JSX元素中的标签都需要闭合，如：

<img ..   /> 
<br/>

2.JSX中的JS

在JSX中使用JS需要将JS放在{大括号内}，如：

ReactDOM.render(<h1>{2 + 3}</h1>,document.getElementById('test'));

再如：

const test = 'Hello World';
ReactDOM.render(<h1>{test}</h1>,document.getElementById('test'));

function function1() {
        alert("hello");
}
const button =<button onClick={function1}>button</button>;
ReactDOM.render(button,document.getElementById('test'));

3.条件语句

JSX中不能使用if else语句，但是可以使用三元运算表达式来代替。如：

ReactDOM.render(<h1>{1!=2?"sure":"impossible"}</h1>,document.getElementById('test'));

也可以使用与‘&&’ 或‘||’ 非‘！’来进行条件判断。

4.数组的使用

数组可以直接定义：

    var arr = [
        <h1>test1</h1>,
        <h2>test2</h2>,
    ];
    ReactDOM.render(
            <div>{arr}</div>,
        document.getElementById('test')
    );

也可以用.map()，这个其实更加方便。比如：

 var arr = ['test1','test2','test3'];
 var arrList = arr.map((arr,index) => <li key={index}>{arr}</li>);
 ReactDOM.render(<ul>{arrList}</ul>,document.getElementById('test'));

5.样式的使用

    var myStyle = {
        fontSize: 20,
        color: '#FF0000'
    };
    ReactDOM.render(
        <h1 style = {myStyle}>hello world</h1>,
        document.getElementById('test')
    );

6.注释

JSX语法中，注释也要写在大括号内：

ReactDOM.render(
    <div>
    <h1>hello</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('test')
);

独立文件

你可以将JSX代码放在一个独立文件中，例如创建helloworld.js文件，代码如下：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('test')
);

然后在HTML中引入该JS文件：

<body>
<div id="test"></div>
<script src="./react/react.development.js"></script>
<script src="./react/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
<script type="text/babel" src="helloworld.js"></script>
</body>

不用JSX

其实使用React也可以不使用JSX，比如下面的JSX表达式：

const h1 = <h1>Hello world</h1>;

不用JSX写就像这样：

const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);

这样的话，你会发现删掉babel这个CDN也可以显示”Hello，world”。但还是使用JSX比较方便。

第二篇《从零一起学》就到这里吧～

buppt

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零一起学react(2)---JSX语法进阶

JSX语法进阶1.JSX元素需闭合JSX元素中的标签都需要闭合，如：<img .. /> <br/>2.JSX中的JS在JSX中使用JS需要将JS放在{大括号内}，如：ReactDOM.render(<h1>{2 + 3}</h1>,document.getElementById('test'));再如：const test = 'Hello World';ReactDOM.render(<
复制链接

扫一扫