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

IT技术 reactjs react-jsx
2021-05-12 13:54:38

考虑这个不会编译的例子：

/** @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 标签包围。

3个回答

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

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

render() 方法是必需的。

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

有一个简单的方法可以绕过这个限制：

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);

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

如官方 React 站点上所述：React Docs

其它你可能感兴趣的问题
上一篇react未定义 下一篇如何在 Android 设备上运行带有 Node js 后端的 React Native 应用程序？