javascript - 如何将 JSX 部分与渲染函数分离

Question

全部:

我对 React.js 还很陌生，只使用了一点 AngularJS，有一个关于 React.js 的问题:

在 AngularJS 中，HTML 部分通常与 JS 代码分离作为模板，我喜欢这种方式，这样可以使代码干净，我想知道是否有类似的方法可以在 React 中做到这一点，或者只使用函数将 this.state/this.props 应用于 HTML 部分？

谢谢

Answer 1

render 函数只是一个同步函数。只要模板已经被某些东西加载，你就绝对可以做到这一点。

//Some module that has loaded the HTML
import jsxStore from 'jsxStore';

class SillyComponent extends React.Component {
    render() {
        return jsxStore.getSillyComponent(this.props, this.state);
    }
}

这里的挑战是确保在进行此调用时加载 HTML，因为 render 不接受异步结果。必须在组件尝试执行任何操作之前加载 HTML。

需要注意的是，你这样做是在对抗 React。 React 的组件理念是一个独立的代码和表示包。目标是将组件保存在单个文件中，以便您可以立即看到整个内容。这与 Angular 等框架有意不同。如果你不喜欢这一点，React 就不太适合你。