React Without JSX - [ React中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目录搜索

Reference Reference: Component Reference: React Advanced Guides Quick Start DOM Elements Glossary of React Terms JavaScript Environment Requirements props React Top-Level API React.Component ReactDOM ReactDOMServer Shallow Renderer state SyntheticEvent Test Renderer Test Utilities Component React API Accessibility Context Error Boundaries Higher-Order Components Integrating with Other Libraries JSX In Depth Optimizing Performance Portals React Without ES6 React Without JSX Reconciliation Refs and the DOM Static Type Checking Typechecking With PropTypes Uncontrolled Components Web Components Components and Props Composition vs Inheritance Conditional Rendering Forms Handling Events Installation Introducing JSX Lifting State Up Lists and Keys Rendering Elements State and Lifecycle Thinking in React

文字

JSX不是使用React的必要条件。如果您不想在编译环境中设置编译，在不使用JSX的情况下使用React特别方便。

每个JSX元素都只是调用的语法糖React.createElement(component, props, ...children)。所以，任何你能用JSX做的事情都可以用普通的JavaScript来完成。

例如，用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')
);

如果您想了解更多JSX如何转换为JavaScript的示例，则可以尝试使用联机的Babel编译器。

组件既可以作为字符串提供，也可以作为子类提供，也可以作为React.Component无状态组件的普通函数提供。

如果你厌倦了打字React.createElement太多，一种常见的模式是分配一个简写：

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

如果你使用这种简写形式React.createElement，在不使用JSX的情况下使用React几乎可以方便。

或者，你可以参考社区项目，如react-hyperscript和hyperscript-helpers其提供了一个更简洁的语法。