简单的JSX 语法

purple_lumpy

于 2018-12-22 20:01:38 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/85202426

6 篇文章

订阅专栏

本文详细介绍了React中JSX语法的基本用法，包括如何使用JSX语法来创建组件，以及如何在JSX中嵌入JavaScript表达式。通过示例展示了如何定义一个简单的React组件，并在其中使用JSX语法来显示文本和计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 React 中，直接使用各种标签的代码语法，叫做JSX 语法。

比如下面

class App extends Component {
  render() {
    return (
      <div>
        hello world
      </div>
    );
  }
}

比如下面

ReactDOM.render(<App />, document.getElementById('root'));

不仅如此，在JSX语法里，还可以在标签里，直接写js 表达式(只是表达式，不是语句)，使用大括号括起来就可以。如下。

class App extends Component {
  render() {
    return (
      <div>
        {1+1}
        hello world
      </div>
    );
  }
}