Как мне преобразовать мои коды в правильный формат jsx? - PullRequest
Новая
       18

Как мне преобразовать мои коды в правильный формат jsx?

1 голос
/ 20 апреля 2020

Я новичок ie в 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>
    )

1 Ответ

1 голос
/ 20 апреля 2020

Оператор 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>
    )
...