Question

我是React.JS的新手。我正在尝试一种非常简单的布局，但是它给“ this”关键字之前的旁括号带来了错误。为什么会给出错误？任何帮助将不胜感激。

import React, { Component } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { NavMenu } from './NavMenu';
import Header from './Header'
import Footer from './Footer'

export class Layout extends Component {
  displayName = Layout.name

  render() {
      return (
          <Header />
            {this.props.children}
          <Footer />
      );
  }
}

Answer 1

您只能从react组件返回一个元素。要返回多个兄弟姐妹，您需要像这样用<></>包装返回的元素

我在编辑的行上方添加//change

return (
    //change
    <>
        <Header />
            {this.props.children}
        <Footer />
    //change
    </>
  );

Answer 2

render()函数必须返回一个包含任意数量的子元素的元素。您可以使用<div>或<React.Fragment>

  render() {
      return (
        <React.Fragment>
          <Header />
            {this.props.children}
          <Footer />
        </React.Fragment>
      );
  }

Answer 3

import React, { Component } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { NavMenu } from './NavMenu';
import Header from './Header'
import Footer from './Footer'

export class Layout extends Component {
  displayName = Layout.name

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.children}
        <Footer />
      </React.Fragment>
    );
  }
}

您不能在根目录中拥有原始的组件，需要将它们包装起来

根据您的反应环境，可以根据需要用<> ... </>替换它们。

Answer 4

在React中，您必须只有一个孩子。

代替此：

<Header />
  {this.props.children}
<Footer />

使用此功能：

<div>
  <Header />
    {this.props.children}
  <Footer />
</div>

但是为什么呢？让我们从渲染的开头开始：

render() {
  return (
    <div></div>
  );
}

在Vanilla JS中变成这样：

render() {
 return (
   React.createElement("div", null)
 );
}

如果您熟悉JavaScript，可能会发现这不是React问题；这是JavaScript设计的局限性。函数不能返回多个值。

然后JSX中存在逻辑块（由于缺乏更好的用语。基本上，这是JSX中的一个地方，允许您使用三元运算符或模板字符串）

此：

render() {
 return (
  <div>
    {
      true ? <div>true stuff here</div> : <div>false stuff here</div>
    }
  </div>
 );
}

转换为此：

render: function render() {
    return React.createElement(
      "div",
      null,
      true ? React.createElement(
        "div",
        null,
        "true stuff here"
      ) : React.createElement(
        "div",
        null,
        "false stuff here"
      )
    );
  }

TL：DR ，每个元素可以是函数中返回的唯一值，子元素是传递的参数。

React.js提供意外令牌

4 个答案: