JSX 片段没有对应的结束标记

Question

如果条件等于真，我正在尝试有条件地渲染一些元素。但据我了解，它给了我一个“解析错误：相邻的 JSX 元素必须被包裹在一个封闭的标签中。你想要一个 JSX 片段 ...> 吗？”就在第 35 行及以下。我将整个代码都包裹在一个 React.Fragment 标记中。请帮忙。我不明白为什么会出现此错误。

import './ProfilePage.css';
import JournalCard from '../../components/JournalCard/JournalCard';
import { Link } from 'react-router-dom';
import userService from '../../services/userService';

class ProfilePage extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return(
            <>
            <div className="profilePage">
            <div className="sign">
             <div className="zodiac-sign">{this.props.user.signs}</div>
               {this.props.user.signs === this.props.signs.sunSign ? 
               <div className="info">
                <div>image:{this.props.signs.image}</div>
                <div>sign: {this.props.signs.sunSign}
                <div>Birthdates:{this.props.signs.dates}</div>
                <div>Element:{this.props.signs.element}</div>
                <div>Planet:{this.props.signs.planet}</div>
               <div>Strengths:{this.props.signs.strengths}</div>
               <div>Weaknesses:{this.props.signs.weaknesses}</div>
               <div>Likes:{this.props.signs.likes}</div>
               <div>Dislikes:{this.props.signs.dislikes}</div>
               <div>Compatibility:{this.props.signs.compatiblity}</div>
                <div>Lucky Numbers:{this.props.sign.luckyNumbers}</div>
                </div>
                :
                <></>
               }
            </div>
            <div className="horoscope">
                <h2>Horoscope</h2>
                {this.props.user.signs === this.props.horoscopes.sign.name ? 
                <div className="horoscope-display">{this.props.horoscopes.result.description}</div>
                :
                <></>
            }
            </div>
            <div className="journal">
                <h3>Journal</h3>
                <div id="journal-box">
                    <div className="journal-display">
                        {this.props.journals.map(journal => 
                            <JournalCard
                                key={journal._id}
                                journal={journal}
                                handleDeleteJournal={this.props.handleDeleteJournal}
                            />
                        )}
                    </div>
                </div>
                <br/>
                <Link className="btn pink lighten-1"
                    to={{ pathname: '/journal' }}>
                        Add Journal Entry
                </Link>
                <br/>
            </div>
            </div>
            </>
        )        
    }
}


export default ProfilePage;```

Answer 1

您在<div className="sign"> 中缺少关闭<div> 标记

应该是这样的

<div className="sign">
  <div className="zodiac-sign">{this.props.user.signs}</div>
  {this.props.user.signs === this.props.signs.sunSign ? (
    <div className="info">
      <div>image:{this.props.signs.image}</div>
      <div>
        sign: {this.props.signs.sunSign}
        <div>Birthdates:{this.props.signs.dates}</div>
        <div>Element:{this.props.signs.element}</div>
        <div>Planet:{this.props.signs.planet}</div>
        <div>Strengths:{this.props.signs.strengths}</div>
        <div>Weaknesses:{this.props.signs.weaknesses}</div>
        <div>Likes:{this.props.signs.likes}</div>
        <div>Dislikes:{this.props.signs.dislikes}</div>
        <div>Compatibility:{this.props.signs.compatiblity}</div>
        <div>Lucky Numbers:{this.props.sign.luckyNumbers}</div>
      </div>
    </div>
  ) : (
    <></>
  )}
</div>