Discussion :

[Soden78]

Bonjour, j'aimerai ouvrir un pdf grâce à une balise link, exemple :

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
{
        id:1,
        name:"Création d'un site avec Symfony 4 : base de donnée + formulaire",
        tags:["Symfony","sql","formulaire"],
        date:"octobre, 2021",
        imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--sBeV06Xc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yrzy75q4dzibqz6rf82.png",
        link: '../assets/GestionLivreRendu.pdf'
    },

sauf que ça ouvre bien une nouvelle page, mais vide, et pas de pdf en vue.

J'ai donc essayer de mettre une balise <a> avec un href vers le pdf lors de la création de la "box" (une sorte de div qui affiche les paramètres de ci-dessus)
Cela marche, mais je n'arrive pas à choisir en fonction de l'id de l'objet donné.
Je pensais à mettre un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if(id === 1){
   <Box target="_blank" to={{ pathname: `${Pdf}` }}>
}
if(id === 2){
   <Box target="_blank" to={{ pathname: `${Pdf2}` }}>
}

en sachant que Pdf et Pdf2 sont des import des pdfs (import Pdf from '../assets/fifactRendu.pdf';)
Je pense que c'est censé marcher mais je débute et j'arrive vraiment pas a utiliser les if en prenant la variable id, quelqu'un pour m'aider soit à faire la méthode des if, soit à m'expliquer une autre façon de le faire.
PS : Toutes les "div" qui affichent les objets sont créer d'un coup (comme un foreach quoi), du coup je peux changer que la variable avec des conditions :/

[-Nikopol-]

Il n'est pas possible d'utiliser des if dans le return d'un .jsx pour rendre un composant optionnel, la méthode est la suivante :
{id ===0 && <MyComponent/>} la deuxième partie du test (<MyComponent/>) est toujours vraie donc si le membre de gauche est vrai alors <MyComponent/> sera rendu.

[Soden78]

Alors je dois faire quoi si le if ne marche pas ?

[-Nikopol-]

je t'ai donné la réponse dans mon message précédent, il suffit de l'adapter

[Soden78]

Il n'est pas possible d'utiliser des if dans le return d'un .jsx pour rendre un composant optionnel, la méthode est la suivante :
{id ===0 && <MyComponent/>} la deuxième partie du test (<MyComponent/>) est toujours vraie donc si le membre de gauche est vrai alors <MyComponent/> sera rendu.

ça veut dire que, je dois mettre
{id ===0 && <MyComponent/>} (MyComponent c'est quoi?)

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
const Box = styled(motion(NavLink))`
  backdrop-filter: blur(2px);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  text-decoration: none;
  width: calc(10rem + 15vw);
  height: 20rem;
  border: 2px solid ${(props) => props.theme.text};
  padding: 1rem;
  color: ${(props) => props.theme.text};
  `};
`;

En fait je comprends pas comment ça marche ;(
A quel moment je choisi la variable qui sera dans le pathname ?

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
const BlogComponent = (props) => {
  const { name, tags, date, imgSrc, link } = props.blog;
  return (
    <Container variants={item}>
      <Box target="_blank" to={{ pathname: `${link}` }}>
        <Image img={imgSrc} />
        <Title>{name}</Title>
        <HashTags>
          {tags.map((t, id) => (
            <Tag key={id}>#{t}</Tag>
          ))}
        </HashTags>
        <Date>{date}</Date>
      </Box>
    </Container>
  );
};