J'essaie d'utiliser la fonction de carte pour ajouter une condition pour afficher le lien de l'e-mail.
Si l'élément contient un e-mail, affichez-le.
Cependant, cela ne fonctionne toujours pas comme il devrait afficher "pas de lien", les journaux de la console étant corrects. Je serai reconnaissant pour toute aide.
import React, { Component } from 'react';
import listIcon from '../img/list-icon.svg';
class FaqList extends Component {
state = {
items: [
{ id: 1, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", email: "hello@email.com", expanded: false },
{ id: 2, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", expanded: false }
]
};
render() {
let link;
const isEmail = this.state.items.map(item => {
if (item.email) {
console.log(item.email); // showing email
link = 'show link';
} else {
link = 'no link';
}
});
return this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{link} // Template here
</div>
</div>
));
}
}
export default FaqList;
5 Réponses :
Vous mappez déjà sur éléments dans votre méthode render . Vous n'avez pas besoin de mapper à nouveau les éléments pour afficher une interface utilisateur en fonction de la présence ou de l'absence de la clé email , cela peut se produire dans votre carte principale < / code>, comme ceci (ligne 38): https://codesandbox.io/s/great -arbre-c12ks
pas besoin d'isEmail, en utilisant jsx power, vous pouvez contrôler la visibilité du lien de l'e-mail à l'intérieur de la fonction de carte dans le rendu comme ça:
render() {
return (
<div>
{this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={
el.expanded
? 'faq__columns--item--active faq__columns--item'
: 'faq__columns--item'
}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{el.email && <div>email: {el.email}</div>}
</div>
</div>
))}
</div>
);
}
Je préfère utiliser un opérateur ternaire au lieu de && , cela ne fonctionnait pas pour moi dans un projet react-native .
Je l'utilise aussi comme ça dans react native, peut-être que vous devez mettre à jour votre version react-native!
essayez quelque chose comme ceci
render() {
return <>
{this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{el.email ? <div>show link</div> : <div>no link</div>}
</div>
</div>
));}
</>
}
On dirait que votre variable link doit être un objet, c'est-à-dire:
const link = {};
const isEmail = this.state.items.map(item => {
if (item.email) {
console.log(item.email); // showing email
link[id] = 'show link';
} else {
link[id] = 'no link';
}
});
... où 1, 2, 3 ... (les clés) sont les identifiants de vos articles, vous pouvez donc ajouter des liens dans le rendu comme celui-ci: {link [id]} // Template here
Dans ce cas, voici une solution rapide:
{
1, 'show link',
2, 'no link'},
...
}
est-ce ce que vous recherchez?
_render_email(obj){
obj.email && console.log(obj.email);
return (obj.email)? <div>obj.email</div> : null;
}
render() {
return this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{
this._render_email(el)
} // -> modified
</div>
</div>
));
}
Pouvez-vous partager votre sortie? ou essayez de créer un violon.
Si votre dernier élément est faux, tous renverront
aucun lien, si votre dernier élément est vrai, tous les éléments renverrontshow link.. Vous n'êtes pas sûr que ce soit votre recherche.Remplacez
{link} // Template herepar{el.email? el.email : null} .const isEmail =qui ne sera pas non plus très utile, ce sera juste un tableau deundefined.@Keith, Vous avez tout à fait raison, cela ne fonctionnera pas car le {link} aura toujours la dernière valeur. Merci
@Ranjan Votre chemin est beaucoup plus propre et fonctionne parfaitement. Il n'est pas non plus nécessaire de créer une nouvelle fonction. Parfait, merci beaucoup.