编译失败：意外的分析错误

Question

  

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)

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)

Answer 1

因为您要在Trades组件中返回两个元素。

您必须在component中返回一个元素。
 所以代替

 <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 docs中的更多信息：
https://reactjs.org/docs/fragments.html#short-syntax

Answer 2

问题出现在您的类名card-text中，您将其拼写为card=text，并在定义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)

Answer 3

代码中的问题是，在 return 方法中，您将发送两个标签或兄弟姐妹，而在 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>

        )
    }

将两个 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>

            )
        }