jsx 基本语法

快来打我* 2023-02-25 03:43 14阅读 0赞

JSX 是一种 JavaScript 的语法扩展，运用于 React 架构中，其格式比较像是模版语言，但事实上完全是在 JavaScript 内部实现的。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面

**1、基本用法**

let poetry = '满地斜阳,翠色和烟老。'
    let jsx = <div>落尽梨花春事了。{poetry}</div>
    
    ReactDOM.render(
      jsx,
      document.getElementById('root')
    );

效果见下图

![20200710163619773.png][]

**2、三目运算**

let f = true
    let jsx = (
      <div>
        {f ? <p>把酒送春春不语。黄昏却下潇潇雨。</p> : <p>凤凰山上雨初晴，水风清，晚霞明。</p>}
      </div>
    )
    
    ReactDOM.render(
      jsx,
      document.getElementById('root')
    );

效果见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

**3、遍历数组**

let poetrys = [
      '天不老，情难绝。心似双丝网，中有千千结。',
      '试上高峰窥皓月，偶开天眼觑红尘。可怜身是眼中人。',
      '可怜今夕月，向何处，去悠悠？是别有人间，那边才见，光影东头？',
      '东风恶。欢情薄。一怀愁绪，几年离索。错错错。',
      '月桥边、青柳朱门。断钟残角，又送黄昏。奈心中事，眼中泪，意中人。'
    ]
    let jsx = (
      <div>
        {poetrys.map((poetry, index) => <p key={index}>{poetry}</p>)}
      </div>
    )
    
    ReactDOM.render(
      jsx,
      document.getElementById('root')
    );

效果见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

**4、组件/函数**

形式 1

function Poetry() {
      return <p>笑渐不闻声渐悄。多情却被无情恼。</p>
    }
    
    ReactDOM.render(
      <Poetry/>,
      document.getElementById('root')
    );

效果见下图

![20200710164922987.png][]

形式 2

class Poetry extends React.Component {
      render() {
        return <p>几时归去，作个闲人。对一张琴，一壶酒，一溪云。</p>
      }
    }
    
    ReactDOM.render(
      <Poetry/>,
      document.getElementById('root')
    );

效果见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2][]

形式 3

class Poetry extends React.Component {
      constructor() {
        super()
        this.state = {
          content : '若待得君来向此，花前对酒不忍触。共粉泪，两簌簌。'
        }
      }
      render() {
        return <p>{this.state.content}</p>
      }
    }
    
    ReactDOM.render(
      <Poetry/>,
      document.getElementById('root')
    );

效果见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 3][]

形式 4

state 中私有属性可修改

class Poetry extends React.Component {
      constructor() {
        super()
        this.state = {
          content : '若待得君来向此，花前对酒不忍触。共粉泪，两簌簌。'
        }
      }
      render() {
        this.state.content = '帘外谁来推绣户，枉教人、梦断瑶台曲。又却是，风敲竹。'
        return <p>{this.state.content}</p>
      }
    }
    
    ReactDOM.render(
      <Poetry/>,
      document.getElementById('root')
    );

效果见下图

![20200710174301884.png][]

形式 5

注意：props 中的数据是只读的

class Poetry extends React.Component {
      constructor(props) {
        super(props)
      }
      render() {
        return <p>{this.props.content}</p>
      }
    }
    
    ReactDOM.render(
      <Poetry content='东池始有荷新绿，尚小如钱。问何日藕、几时莲。' />,
      document.getElementById('root')
    );

效果见下图

![2020071017201384.png][]

[20200710163619773.png]: /images/20230209/9b74c84c6f9c4011bfddd1e03b8b40f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20230209/25f190f5cf8c4f899ee6b06aadd0fe19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20230209/c29463200d08442cb2a1a93705cd9c0e.png
[20200710164922987.png]: /images/20230209/3a00998c21f0436db971a8012a630ae9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2]: /images/20230209/76821a3d75f64dfc8be81990051971d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 3]: /images/20230209/952607eb13884476b82b8c0fedb98e91.png
[20200710174301884.png]: /images/20230209/1dfcc023405a402383490ffd0adf8e24.png
[2020071017201384.png]: https://img-blog.csdnimg.cn/2020071017201384.png