JSX

声明

const element = <h1>Hello, world!</h1>;

JSX 是javaScript的扩展语法，支持javaScript 全部功能

jsx生成React元素 渲染UI

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

使用if

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 属性

1 可以 使用引号包裹 表示属性

const element = <div tabIndex="0"></div>;

2 可以使用大括号包裹 表示属性

const element = <img src={user.avatarUrl}></img>;

注意 不能同时使用

"{XXX}" 被视为 字符串

JSX创建对比

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement 方式 使用代码检测 避免错误代码 导致bug

两种创建都一样 实质 都是下面这样

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};