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;

渲染列表

例子

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;

JSX 基本知识点 ​

基本使用 ​

条件判断 ​

渲染列表 ​

JSX 基本知识点

基本使用

条件判断

渲染列表