如何将我的代码转换为正确的 jsx 格式？

Question

我是 Reactjs 的新手。这是我的代码。我希望 Link 组件只包装 Card 组件。但是当我的代码是这样的时候，reactjs 让我失望了。我怎样才能正确编写这些代码？

const ImageFrame = ({ movieId, movieName, searchWord, image, personMovieId, clickable, clearFavouriteMovie }) => {

return (

        <div className = "col-sm-3 mt-5 animated fadeInLeftBig ">

            { clickable ? /* if clickable props is true --> go movie, else go movie again but with personal movie id ! */

                 <Link to={{ pathname:`/movie/${movieId}`, movieName: `${movieName}`, searchWord: `${searchWord}` }}>

                    <Card className = "card-box image-frame  ">

                        <Card.Img variant="top" src={image} alt="movieImg" />

                    </Card>

                    </Link> **!!! I WANT Link component stays here !!!** 

                    { 

                        clearFavouriteMovie && <button

                            className = "mt-3 btn btn-warning"

                            onClick = { () => clearFavouriteMovie(movieId)}

                        > Bu Filmi Sil </button> 

                    }

                : 

                <Link to = {{pathname: `/movie/${personMovieId}`}}>  {/* Person Known For Movies*/}

                <Card className = "bg-dark text-light card-box  image-frame " style = {{maxHeight: "500px"}}>

                    <Card.Img variant="top" src={image} alt="movieImg" />

                </Card>

                </Link>

            }            

        </div>

    )

Answer 1

if 语句只能返回一个元素，在这种情况下，您尝试返回两个<Link>并将<button>其合并为一个使用 a<React.fragment>例子const ImageFrame = ({ movieId, movieName, searchWord, image, personMovieId, clickable, clearFavouriteMovie }) => {return (&nbsp; &nbsp; &nbsp; &nbsp; <div className = "col-sm-3 mt-5 animated fadeInLeftBig ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { clickable ? /* if clickable props is true --> go movie, else go movie again but with personal movie id ! */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<React.fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Link to={{ pathname:`/movie/${movieId}`, movieName: `${movieName}`, searchWord: `${searchWord}` }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card className = "card-box image-frame&nbsp; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Img variant="top" src={image} alt="movieImg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link> **!!! I WANT Link component stays here !!!**&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearFavouriteMovie && <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className = "mt-3 btn btn-warning"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick = { () => clearFavouriteMovie(movieId)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; > Bu Filmi Sil </button>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </React.fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to = {{pathname: `/movie/${personMovieId}`}}>&nbsp; {/* Person Known For Movies*/}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card className = "bg-dark text-light card-box&nbsp; image-frame " style = {{maxHeight: "500px"}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Img variant="top" src={image} alt="movieImg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )