Actuellement, j'ai ceci dans l'un de mes composants:
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
},
{
obj: "<p>Some text 2 and <Link to="/someroute">link</Link>.</p>"
}
]
En gros, je mappe sur someObject qui sur un autre fichier. La structure est comme ceci:
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
}
]
Je simplifie juste le contenu pour la démonstration. Cependant, j'ai rencontré un problème car je dois utiliser le composant dans l'un des éléments. Comme dans:
{someObject.map(obj => (
<div
dangerouslySetInnerHTML={{
__html: obj.text
}}
/>
))}
Cependant, cela ne fonctionne pas car toute la balise est enveloppée dans dangerouslySetInnerHTML code>.
Je peux simplement utiliser la balise simple pour le lien mais cela ne semble pas être une bonne solution car l'application entière se rechargerait à la place d'aller simplement vers un autre itinéraire.
Quelles sont les autres options pour que cela fonctionne?
3 Réponses :
export default someObject = [
{
obj: "<p>Some text 1.</p>"
},
{
obj: "<p>Some text 2.</p>"
},
{
obj: linkto('/someroute')
}
]
linkto will solve your issue.
Où insérer le texte "link" dans $ {link to ('/ same route')?
Veuillez d'abord essayer avec ce code `` obj: linkto ('/ login') ``
Il existe deux façons de résoudre ce problème:
c'est comme une approche plus générale que vous pouvez utiliser pour choisir votre code. essayez d'utiliser cette bibliothèque ( https://github.com/tasti/react-linkify/)
Voici la forme la plus simple du composant:
buildLink() {
return(
<p>
{list.text}. <a href={list.link}>{list.link}</a>
</p>
);
}
render() {
return (this.buildLink());
}
Dans le cas où, si vous voulez créer un hyperlien ( ), vous devriez avoir une fonction qui construit des éléments et renvoie le résultat.
Exemple:
list = {
text: 'hello world',
link: 'www.facebook.com'
}
Et la fonction de rendu pourrait être quelque chose comme:
import React, {PropTypes} from 'react';
import Linkify from 'react-linkify';
export default class TextWithLink extends React.Component {
constructor(props) {
super(props);
}
render() {
let text = this.props.text;
if(this.props.showLink) {
text = <Linkify properties={{target: '_blank', rel: "nofollow noopener"}}>{text}</Linkify>
}
return (<div>{text}</div>);
}
}
Pourquoi n'exportez-vous pas simplement l'objet en tant qu'objet jsx? Je pense qu'utiliser dangerouslySetInnerHTML est une mauvaise pratique, cela pourrait provoquer une attaque XSS.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
const someObject = [
{
obj: <p>Some text 1.</p>
},
{
obj: <p>Some text 2.<a href="https://google.com">google</a></p>
}
]
class App extends React.Component {
render(){
return (
<div className="App">
<h1>Hello world</h1>
<h2>Jsx object goes here {someObject[1].obj}</h2>
</div>
)};
}
const rootElement = document.getElementById("container");
ReactDOM.render(<App />, rootElement);
Ouais, je me rends compte que je peux faire ça au lieu de tout envelopper dans une chaîne.
pourquoi ne pas simplement les convertir en simples extraits JSX et les utiliser comme des enfants de composants de réaction réguliers?
@Derek Pouvez-vous élaborer là-dessus? Comme un exemple?
@Derek Peu importe, j'ai compris ce que tu veux dire. Réalisé que je peux réellement utiliser JSX comme valeur de l'objet.