jsx 基本语法

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

 

1、基本用法

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

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

效果见下图

 

 

2、三目运算

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

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

效果见下图

 

 

3、遍历数组

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

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

效果见下图

 

4、组件/函数

形式 1

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

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

效果见下图

 

形式 2

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

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

效果见下图

 

形式 3

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

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

效果见下图

 

形式 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')
);

效果见下图

 

 

形式 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')
);

效果见下图