首页 > 专栏 > 前端 > 文章详情
在 React 中不使用 JSX,使用正常的 JavaScript 发布于:2021-03-27 12:02:45   来源:React   查看:3  讨论:0
用 JSX 编写的代码:
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
    <Hello toWhat="World" />,
    document.getElementById('root')
);
不使用 JSX 的代码:
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
    React.createElement(Hello, {toWhat: 'World'}, null),
    document.getElementById('root')
);
如果你不想每次都键入 React.createElement,通常的做法是创建快捷方式:
const e = React.createElement;

ReactDOM.render(
    e('div', null, 'Hello World'),
    document.getElementById('root')
);

评论

  • 匿名