如何将我的代码转换为正确的 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 (

        <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 ! */

                 <React.fragment>

                 <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> 

                    }

                </React.fragment>

                : 

                <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>

    )