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

【问题标题】：How do I convert my codes to correct jsx format?如何将我的代码转换为正确的 jsx 格式？
【发布时间】：2020-08-02 17:39:42
【问题描述】：

我是 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>
    )

【问题讨论】：

你得到了什么错误代码，到目前为止你尝试了什么？
感谢您的快速反馈。我想要这样的链接组件，因为每当我单击删除电影按钮时，它都会通过链接将我重定向到该链接。我的错误是：解析错误：意外的令牌，预期的“：”

标签： javascript reactjs react-router jsx

【解决方案1】：

if 语句只能返回一个元素，在这种情况下，您尝试返回两个 <Link> 和 <button> 以使其合二为一，使用 <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>
    )

【讨论】：