javascript - 解析错误意外令牌“"

Question

我正在映射数据并将其对象填充到我的 Cards 组件，我想将显示限制为仅 3 张卡，但在我的 dummydata 上我有 6 个对象。现在在我的地图中，我将 countcards 状态和 Cards 组件设置为地图的道具，但它返回Parsing Error: Unexpected Token并且它指向 Cards 组件上的三 (3) 个点。

代码

Works.js

import styled from 'styled-components'
import Cards from './Cards'
import {mainData} from '../data'

function Works() {

    const [countCard, setCountCard] = useState(2);

    const Btncontainer = styled.div`
    display:${props => props.display};
    `;

    return (
        <section id="works" className="works">
            <h1>Works</h1>
            <div className="wrapper">
                {
                    mainData.map((e, index)=>{
                        return(
                            index <= countCard && <Cards .../>
                        )
                    })
                }
            </div>
            <Btncontainer display={countCard === 2 ? 'none' : 'block'} >
                <button onClick={()=>mainData.length - countCard=== 3 ? setCountCard(countCard - 2): setCountCard(countCard - 3)}>See Less</button>
            </Btncontainer>
            <Btncontainer display={countCard === mainData.length ? 'none' : 'block'} >
                <button onClick={()=>mainData.length - countCard === 0 ? setCountCard(countCard + 2): setCountCard(countCard + 3 )}>Load More</button>
            </Btncontainer>
        </section>
    )
}

export default Works

Cards.js

import React, { useState} from 'react'

function Index(props) {
    return (
        <>
        <div className="card-container" key={props.id}>
            <figure className="image-block">
                <img src={props.thumb} alt="" />
                <figcaption>
                    <h3>
                        {props.name}
                    </h3>
                    <p>{props.discription}</p>
                </figcaption>
            </figure>
    </div>
        </>

    )
}
export default Index

标签： javascriptreactjs