React 深入 JSX（10）

JSX

• JSX 其实是 React.createElelment 函数调用的语法糖
• JSX 会将代码编译成 React.createElelment 调用形式

React.createElement(
  "div",
  {
    className: "box",
  },
  "boxbox"
)

• 在 JSX 中使用点语法

const colorSystem = {
  primary: "blue",
  success: "green",
  danger: "red",
};
const MyUI = {
  Button: class extends React.Component {
    render() {
      const { type, children } = this.props;
      return (
        
          {children}
        
      );
    }
  },
};

class App extends React.Component {
  render() {
    return (
      

        {/* 点语法 */}
        
      
    );
  }
}

书写规范

• 小写字母开头代表 HTML 的内置组件 (
  /

  //

  )，将转换为 React.createElelment 第一个参数

• 大写字母开头代表自定义组件 ，编译为 React.createElelment()

运行时选择 React 组件

class LoginBtnGroup extends React.Component {
  render() {
    return (
      

        登录
        注册
      
    );
  }
}

class WelcomeInfo extends React.Component {
  render() {
    return (
      

        欢迎登录
      
    );
  }
}

class Header extends React.Component {
  static components = {
    login: LoginBtnGroup,
    welcome: WelcomeInfo,
  };
  render() {
    const HeaderUser = Header.components[this.props.type];

    return ;
  }
}

class App extends React.Component {
  state = {
    isLogin: true,
  };
  render() {
    return (
      

        

      
    );
  }
}

JSX 的 props

class Content extends React.Component {
  render() {
    return 
{this.props.content}
;
  }
}
class App extends React.Component {
  state = {
    isLogin: true,
  };
  render() {
    return (
      

        {/* js表达式方式传入 props， HTML 实体字符会被转义成普通字符 */}
        {/* <asdfa> */}
        

        {/* 字符串字面量传入props方式，不会对HTML实体转义 */}
        {/*  */}
        
        {/*  */}
        

        
reacr 
 First     Second",
          }}
        >
      
    );
  }
}

• JSX props bool 的表达

class MyTitle extends React.Component {
  render() {
    console.log(this.props.isShow);
    const { isShow, children } = this.props;

    return (
      

        jsx 中 props 的 bool 值: {children}
      
    );
  }
}
class App extends React.Component {
  render() {
    return (
      

        {/* 只是字符串，不代表 bool */}
        
        {/* 布尔类型 */}
        
        {/* 不赋值属性，默认为 true */}
        {/* 不推荐这么做，语义不好，类似ES6的对象省略属性值  {isShow} ==> {isShow: isShow}  */}
        
      
    );
  }
}

• 属性展开操作

class MyTitle extends React.Component {
  render() {
    console.log(this.props);
    const { isShow, title, children } = this.props;

    return 
{title}--{children}
;
  }
}

class App extends React.Component {
  render() {
    // 把不需要的提出来，子组件中需要的放到剩余参数
    const { content, ...others } = this.props;

    return (
      

        {/* 默认展开 */}
        
      
    );
  }
}

ReactDOM.render(
  
    {/* 这里默认是 children，会自动加到 props 中 */}
    This is Childrenssss
  ,
  document.querySelector("#app")
);

• 字符串字面量

1. 会自动去掉首尾空格换行
2. 字符串之间的多个空格压缩为一个空格（使用   实现多个空格 ）
3. 字符串之间的换行压缩为一个空格（使用
实现换行）

class MyTitle extends React.Component {
  render() {
    return 
{this.props.children}
;
  }
}

class App extends React.Component {
  render() {
    return (
      

           This is a <Title>    
        {"This is a <Title>"}
        {"This is a