Javascript 未能编译：意外的分析错误

JSX片段元素必须包装在一个封闭的标记中

因为我已经使用了封闭，有什么问题吗

Trades.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Trades extends Component {
    render() {
        return (
            <div className="card bg-dark text-white">
                Card Title
            </div>
            <div className="card-body">
                <p className="card=text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="/#" className="card-link">Card link</a>
            </div>

        )
    }
}

function mapStateToProps(state) {
    return {
        exchange: exchangeSelector(state)
    }
}

export default connect(mapStateToProps)(Trades)

import React，{Component}来自“React”
从“react redux”导入{connect}
类扩展组件{
render（）{
返回(
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
)
}
}
函数MapStateTops（状态）{
返回{
交换：交换选择器（状态）
}
}
导出默认连接（MapStateTops）（交易）

Content.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { exchangeSelector } from '../store/selectors'
import { loadAllOrders } from '../store/interactions'
import Trades from './Trades'

class Content extends Component { 
  componentWillMount() {
    this.loadBlockchainData(this.props.dispatch)
  }
 async loadBlockchainData(dispatch) {
    await loadAllOrders(this.props.exchange, dispatch)
  }
  render() {
    return (
      ......
          <div className="card bg-dark text-white">
            <div className="card-header">
              Card Title
            </div>
            <div className="card-body">
              <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="/#" className="card-link">Card link</a>
            </div>
          </div>
        </div>
        <div className="vertical">
        <Trades />                              // <<--
      </div>
    </div>
    )
  }
}
function mapStateToProps(state) {
  return {
    exchange: exchangeSelector(state)
  }
}

export default connect(mapStateToProps)(Content)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../store/selectors”导入{exchangeSelector}
从“../store/interactions”导入{loadAllOrders}
从“./贸易”导入贸易
类内容扩展组件{
组件willmount（）{
this.loadBlockchainData（this.props.dispatch）
}
异步loadBlockchainData（调度）{
等待loadAllOrders（this.props.exchange，dispatch）
}
render（）{
返回(
......
卡片标题
一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分
//问题在于您的类名
卡片文本
，您将其错写为
卡片=文本
，并在定义react组件时使用封闭标记，如下所示：

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Trades extends Component {
    render() {
        return (
            <>
                <div className="card bg-dark text-white">
                    Card Title
                </div>
                <div className="card-body">
                    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="/#" className="card-link">Card link</a>
                </div>
            </>
        )
    }
}

function mapStateToProps(state) {
    return {
        exchange: exchangeSelector(state)
    }
}

export default connect(mapStateToProps)(Trades)

import React，{Component}来自“React”
从“react redux”导入{connect}
类扩展组件{
render（）{
返回(
卡片标题
一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分
)
}
}
函数MapStateTops（状态）{
返回{
交换：交换选择器（状态）
}
}
导出默认连接（MapStateTops）（交易）
因为您在交易组件中返回两个元素

您必须在组件中返回一个元素。

所以不是

 <div className="card bg-dark text-white">
            Card Title
  </div>
   <div className="card-body">
            <p className="card=text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="/#" className="card-link">Card link</a>
   </div>


卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

试试这个：

  <>
        <div className="card bg-dark text-white">
            Card Title
        </div>
        <div className="card-body">
            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="/#" className="card-link">Card link</a>
        </div>
    </>


卡片标题
一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分

react文档中的更多信息：

代码中的问题是，在返回方法中，您正在发送两个标记或兄弟姐妹，而在反应中，您必须有单亲，可以分为多个子

您的代码：

render() {
        return (
            <div className="card bg-dark text-white">
                Card Title
            </div>
            <div className="card-body">
                <p className="card=text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="/#" className="card-link">Card link</a>
            </div>

        )
    }

render（）{
返回(
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
)
}

在将两个div包装到一个父div中后，新代码

    render() {
            return (
               <div>
                  <div className="card bg-dark text-white">
                      Card Title
                  </div>
                  <div className="card-body">
                      <p className="card=text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="/#" className="card-link">Card link</a>
                  </div>
               </div>

            )
        }

render（）{
返回(
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分
)
}
第一个片段：返回两个“顶级”该
语句中的元素返回
语句
…
…第二个片段：您已经用“…”隐藏了其中的一些元素，所以谁知道它们是额外的标记，请将它们删除。您拥有@DarkKnight-完美valid@DarkKnight-妈的，我只是想出了个笑话…没有把两个代码片段联系起来：如果那是一个LH，你应该投票以键入错误的方式关闭，而不是回答如何使用
..
而不是
..
-就像OP帖子中的错误消息所建议的那样？@Bravo尽可能地使用它的随附标签，我想是它的经销商的选择，我更喜欢divs:）@学习者-使用divs添加可能影响CSS和其他东西的标记…使用
…
意味着没有额外的标记（该空标记不会在DOM中结束）@HyeongwonO没问题，很乐意帮助，你可以通过投票的方式表达你的感激之情，不用投票，留下我的，因为我已经有了足够的声誉，也感谢Bravo帮助我更正了我的答案，但是投票给其他声誉不高的用户，他们花时间帮助你谢谢你的回复我不知道那么多人会回答谢谢你的回答我不知道有这么多人会回答