马文的地下室

学习笔记《JSX》

2016-11-13  本文已影响4人  马文Marvin

JSX 可以被视为一种 JS 的模板语言,形如:

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

使用引号来表示 JS 代码:

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

如果是多行的话,可以加一个括号:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

在 React 中三种等价的创建形式:

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

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

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

就是这些,是不是非常简单:)

上一篇 下一篇

猜你喜欢

热点阅读