在大多数情况下,拥有父标签不是问题.

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

但在某些情况下,在一个呈现函数中使用同级元素而不使用父元素是有意义的,尤其是在表的情况下,您不希望将表行包装为div.

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

第二个例子给出了以下错误:Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

如何渲染两个sibling 元素,而不将它们包装在<div>或类似的文件中?

推荐答案

呜呜!React团队最终添加了这个功能.从第16节开始.0,您可以执行以下操作:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

full blog post explaining "New render return types: fragments and strings" here.

Reactjs相关问答推荐

react 表复选框不对任何操作做出react

Reaction-路由v6动态路径RegExp

如何将图像(在代码中称为自己)定位在蓝色圈内的点上?我正在使用material UI和Reaction

Reaction-Query&-使用Mutation触发成功,而应该触发错误

React 错误: 只能用作 元素的子元素,从不直接渲染.请将您的 包裹在

PWA:注册事件侦听器不会被触发

在一个事件处理程序中进行多次调度是个好主意吗?

在 monorepo 内的工作区或库之间共享 redux 状态

如何更新redux状态存在的输入框

React中的功能性组件克隆优化

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误:没有当前用户

我应该如何将字符串作为props 传递给 React 组件?

顶点图表甜甜圈项目边框半径

如果传递给挂钩的数据需要事先修改,如何使用自定义挂钩?

如何从 graphql/apollo 中的缓存中清除多个查询

Cypress - 替换 React 项目中的变量

Mui CardMedia 的图片组件

如何在 Cypress E2E 的站点上测试react 组件?

如何在 Reactjs 中判断受保护路由上的用户角色?

如何在组件文件夹内的react 组件文件中导入外部css文件?