JSX 基本知识点

基础知识

基本使用

• 变量、表达式
• class style
• 子元素和组件

列子，组件 JSXBaseDemo.js

import React from "react";
import List from './ListDemo'

class JSXBaseDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: 'lzw',
      imgUrl: 'https://gravatar.loli.net/avatar/c0cd88e37cadb689c9c79caa0e9ac1f8?s=128',
      flag: true
    }
  }

  render() {
    // 获取变量 插值
    const pElem = <p>{this.state.name}</p>
    // return pElem

    // 表达式
    const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>
    // return exprElem

    // 子元素
    const imgElem = <div>
      <p>我的头像</p>
      <img src={this.state.imgUrl} alt=""/>
    </div>
    // return imgElem

    // class
    const classElem = <p className="title">设置 class </p>
    // return classElem

    // style
    const styleData = {fontSize: '30px', color: 'red'}
    let styleElem = <p style={styleData}>设置 style </p>
    // 内联写法 注意是： {{}}
    styleElem = <p style={{fontSize: '50px', color: 'green'}}>设置 style</p>
    // return styleElem

    // 原始 html
    const rawHtml = '<sapn>富文本内容<i>斜体</i><b>粗体</b></sapn>'
    const rawHtmlData = {
      __html: rawHtml // 注意，必须是这种格式
    }
    const rawHtmlElem = <div>
      {/*显示 html*/}
      <p dangerouslySetInnerHTML={rawHtmlData}></p>
      {/*显示源代码*/}
      <p>{rawHtml}</p>
    </div>
    // return rawHtmlElem

    // 加载组件
    const componentElem = <div>
      <p>JSX 中加载一个组件</p>
      <List/>
    </div>
    return componentElem
  }
}

export default JSXBaseDemo

然后在 App.js 中测试

import JSXBaseDemo from "./JSXBaseDemo";

function App() {
  return (
    <div className="App">     
      <JSXBaseDemo/>
    </div>
  );
}

export default App;

条件判断

• if else
• 三元表达式
• 逻辑运算符 && ||

例子

import React from "react";

class ConditionDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      theme: 'black'
    }
  }

  render() {
    const blackBtn = <button className="btn-black">black btn</button>
    const whiteBtn = <button className="btn-white">white btn</button>

    // if else
    if (this.state.theme === 'black') {
      // return blackBtn
    } else {
      // return whiteBtn
    }

    // 三元表达式
    // return <div>
    //   {this.state.theme === 'black' ? blackBtn : whiteBtn}
    // </div>

    // &&
    return <div>
      {this.state.theme === 'black' && blackBtn}
    </div>
  }
}

export default ConditionDemo

渲染列表

• map
• key

例子

import React from "react";

class ListDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = [
      {
        id: 'id-1',
        title: '标题-1'
      },
      {
        id: 'id-2',
        title: '标题-2'
      },
      {
        id: 'id-3',
        title: '标题-3'
      }
    ]
  }

  render() {
    return <ul>
      {
        // 类似 Vue v-for
        this.state.map(
          (item, index) => {
            // 这里的 key 和 Vue 的 key 类似，必填，不能是 index 或 random
            return <li key={item.id}>
              index {index}; title {item.title}
            </li>
          }
        )
      }
    </ul>
  }
}

export default ListDemo