当多个 React DOM 组件在没有外部 div 的情况下使用时，JSX 将无法编译

Posted 2023-02-21

【中文标题】当多个 React DOM 组件在没有外部 div 的情况下使用时，JSX 将无法编译

【英文标题】：when multiple React DOM components are used without outer div then JSX won't compile

【发布时间】：2014-04-12 09:13:34

【问题描述】：

考虑这个无法编译的例子：

/** @jsx React.DOM */

var Hello = React.createClass(
  render: function() 
    return <div>Hello</div>;
  
);

var World = React.createClass(
  render: function() 
    return <div>World</div>;
  
);

var Main = React.createClass(
  render: function() 
    return (
        <Hello />
        <World /> 
    );
  
);

React.renderComponent(<Main />, document.body);

但这些组合中的任何一种都有效：

<div>
 <Hello />
 <World />
</div>

 <Hello />
 //<World />

 //<Hello />
 <World />

想知道多个组件是否应该始终被 div 标签包围。

【参考方案1】：

我认为渲染函数应该只返回一个组件。

来自文档：http://facebook.github.io/react/docs/component-specs.html

render() 方法是必需的。

调用时，它应该检查 this.props 和 this.state 并返回单个子组件

【讨论】：

是的，这是正确的。正如您所指出的，您几乎总是可以将结果包装在 <div> 标记中。 （在未来的某个时候，我们希望摆脱这种限制。）

它的 2016 年，未来的时间还没有到来

2019 年了，时间还没到。

【参考方案2】：

有一个简单的方法可以解决这个限制：

var Hello = React.createClass(
  render: function() 
    return <div>Hello</div>;
  
);

var World = React.createClass(
  render: function() 
    return <div>World</div>;
  
);

var HelloWorld = [Hello, World];

var Main = React.createClass(
  render: function() 
    return (
        HelloWorld
    );
  
);

React.renderComponent(<Main />, document.body);

【讨论】：

我收到了A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这曾经在早期版本的 React 中工作。显然，您将无法使用最新版本解决此限制。 :(

【参考方案3】：

React 组件只能渲染单个根节点。如果你想 返回多个节点，它们必须包装在一个根中。

在官方 React 网站上指定：React Docs