Question

如何在最终呈现中删除<div className='wrapper'></div>周围的<main></main>：

class Projects extends Component {
  render() {
    return (
      <div className='wrapper'>
        <header>Header Content</header>
        <main>Content goes here</main>
        <footer>Footer Content</footer>
      </div>
    )
  }
}

结果：

<div className='wrapper'>
  <header>Header Content</header>
  <main>Content goes here</main>
  <footer>Footer Content</footer>
</div>

没有<div className='wrapper'></div>的预期结果：

<header>Header Content</header>
<main>Content goes here</main>
<footer>Footer Content</footer>

问题是渲染只能返回一个父div（或其他标签）而且不能有兄弟姐妹。

我知道怎么在vue.js中这样做，但对react.js不确定

<template>
  <header>Header Content</header>
  <main>Content goes here</main>
  <footer>Footer Content</footer>
</template>

将导致：

<header>Header Content</header>
<main>Content goes here</main>
<footer>Footer Content</footer>

Answer 1

如果我正确理解您，您只是将其包含在render中：

class Projects extends Component {
  render() {
    return (
        <main>Content goes here</main>
    );
  }
}

或

class Projects extends Component {
  render() {
    return <main>Content goes here</main>;
  }
}

重新提出更新的问题：你不会把它作为一个组件。组件必须具有单个顶级元素。例如，你不能返回一个元素数组。

Answer 2

不确定＆＃34;最终渲染＆＃34; 是什么意思，但你可以添加一些条件来检查是否包含div

class Projects extends Component {
  constructor(props) { 
    super(props);    
    this.state = {isIncluded: true};
  }
  render() {
    if (isIncluded) { // it will be included only if `isIncluded` true
      <div className='wrapper'>
        <main>Content goes here</main>
      </div>
    }
    else { // otherwise
      return (      
        <main>Content goes here</main>
      );
    }
  }
}

Answer 3

你不能这样做（据我所知）。问题是React只接受1个元素，只能渲染1个元素。该元素可以包含任意数量的兄弟，这是由React.createElement（）的工作方式引起的。请记住，jsx <div> children </div>是createElement函数的糖语法。有关更多详细信息，请参阅React documentation

在您的具体情况下，您可以轻松解决此问题的方法是分别渲染3个部分中的每个部分（这就是它应该为Header，Content和Footer完成的方式）。

因此，有一个组件用于另一个组件用于内容而另一个组件用于页脚并单独呈现它们，这样就不需要将它们全部放在一个组件中。

这在很大程度上取决于您使用的框架。

Answer 4

不幸的是，这就是React的工作原理。由于底层架构，它期望为组件返回单个节点。

但是，此问题已在React社区中进行了讨论，现在可以使用修复程序（版本 16RC ）。请参阅此处的发布说明 - https://github.com/facebook/react/issues/10294。

您可以更新到此版本并将代码更改为此类代码 -

return [
    <header>Header Content</header>,
    <main>Content goes here</main>,
    <footer>Footer Content</footer>
];

虽然我自己没有尝试过，但您可以尝试这一点，并在此处详细了解有关此问题的讨论 - https://github.com/facebook/react/issues/2127。希望这会有所帮助。

React JS：如何在最终渲染中获取标记

4 个答案: