React render能否不直接写HTML标签？调用返回JSX方法报语法错误解决办法

React render 方法能否不直接编写HTML标签？ #

完全可以。React 本身支持把需要渲染的JSX结构拆分封装到独立的方法、变量中，再在render方法里引用这些封装好的内容，不需要把所有HTML标签硬编码在render的返回根节点里。这种拆分方式还能复用重复的UI逻辑，降低代码冗余。

编译报错的原因 #

从你给出的报错信息和代码来看，触发错误的原因有两点：

• 违反了JSX的基本语法规则：JSX要求render方法返回的结构必须有且仅有一个根元素作为包裹，你当前的代码在render的return括号内，直接裸露了花括号包裹的表达式{somefun()}，没有任何JSX标签作为最外层容器，解析器在遇到这个裸露的花括号时，会判定为非预期的语法token，和你看到的第9行的报错位置完全对应。
• 方法调用的作用域错误：somefun是你定义在App类上的实例方法，在类内部调用时必须通过this关键字绑定当前类实例的上下文，直接写somefun()会在全局作用域查找方法，就算解决了根节点的语法问题，后续也会抛出somefun is not defined的引用错误。

修正方案 #

按照上面的原因调整代码，满足JSX语法规则、正确调用实例方法即可，修正后的可运行代码如下：

import React from 'react';

export default class App extends React.Component {
    somefun() {
        return (<p>hello</p>);
    }
    render() {
        return ( 
            {/* 外层加根节点包裹，调用方法时绑定this指向 */}
            <div>
                {this.somefun()}
            </div>
        )
    }
 }

如果不希望在实际DOM中生成多余的div节点，可以用React.Fragment（简写为空标签<></>）作为外层根节点，效果完全一致且不会产生额外的DOM结构：

import React from 'react';

export default class App extends React.Component {
    somefun() {
        return (<p>hello</p>);
    }
    render() {
        return ( 
            <>
                {this.somefun()}
            </>
        )
    }
 }

内容的提问来源于stack exchange，提问作者K.Nicholas