react文档

在 JSX 中嵌入表达式

const element = <h1>Hello, world!</h1>;//标签语法被称为 JSX
ReactDOM.render(element, document.getElementById('root'));//将一个 React 元素渲染到根 DOM 节点，只会调用一次


const element = <h1>Hello, {name}</h1>;//可以在大括号内放置任何有效的 JavaScript 表达式。
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;//可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
  }
  return <h1>Hello, Stranger.</h1>;
}

//JSX 表示对象:以下两种示例代码完全等效
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX 特定属性

const element = <div tabIndex="0"></div>;//通过使用引号，来将属性值指定为字符串字面量
const element = <img src={user.avatarUrl}></img>;//使用大括号，来在属性值中插入一个 JavaScript 表达式

元素渲染