React.js 给出了意外的令牌答案

【问题标题】：React.js gives Unexpected tokenReact.js 给出了意外的令牌
【发布时间】：2020-04-21 08:53:34
【问题描述】：

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

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

【问题讨论】：

你需要将整个东西包装在一个 React Fragment 中
什么意思？我对 React 很陌生。请帮忙

标签： javascript html reactjs jsx

【解决方案1】：

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

你不能在根目录中有这样的原始组件，它们需要被包装起来

您可以根据自己的反应环境将它们替换为<> ... </>。

【讨论】：

【解决方案2】：

在 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 中允许您使用三元运算符或模板（a）字符串的地方：

这个：

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，每个元素可以是函数中唯一返回的值，子元素是传递的参数。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：