jsx 基本语法

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

 

1、基本用法

let poetry = '满地斜阳,翠色和烟老。'
let jsx = 
落尽梨花春事了。{poetry}

ReactDOM.render(
  jsx,
  document.getElementById('root')
);

效果见下图

 

 

2、三目运算

let f = true
let jsx = (
  

    {f ? 
把酒送春春不语。黄昏却下潇潇雨。
 : 
凤凰山上雨初晴，水风清，晚霞明。
}
  
)

ReactDOM.render(
  jsx,
  document.getElementById('root')
);

效果见下图

 

 

3、遍历数组

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

    {poetrys.map((poetry, index) => 
{poetry}
)}
  
)

ReactDOM.render(
  jsx,
  document.getElementById('root')
);

效果见下图

 

4、组件/函数

形式 1

function Poetry() {
  return 
笑渐不闻声渐悄。多情却被无情恼。
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

效果见下图

 

形式 2

class Poetry extends React.Component {
  render() {
    return 
几时归去，作个闲人。对一张琴，一壶酒，一溪云。
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

效果见下图

 

形式 3

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

ReactDOM.render(
  ,
  document.getElementById('root')
);

效果见下图

 

形式 4

state 中私有属性可修改

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

ReactDOM.render(
  ,
  document.getElementById('root')
);

效果见下图

 

 

形式 5

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

class Poetry extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return 
{this.props.content}
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

效果见下图