--JSX ne semble pas afficher correctement?

Question

Je veux simplement sortir une liste de <p> mais je ne connais pas la syntaxe correcte.

J'ai vérifié que les données sont correctement stockées dans this.props.bookmarks.bookmarks mais n'ont pas pu trouver comment les rendre correctement. J'ai vérifié qu'il y a aussi une propriété bookmark.title.

Avec la fonction composante React render() je comme suit:

return (

// ... snip 

this.props.bookmarks.bookmarks.map((bookmark) => { 
    return "<p>{bookmark.title}</p>"; 
}); 

// ... snipt 

) 

Mise à jour:

var titles = this.props.bookmarks.bookmarks.map((bookmark) => { 

    return <div className='bookmark_div' id='generated1'> 
    <img className='bookmark_image' id='generated2' src='http://arcmarks.com/_images/sv_favicon.svg'/> 
    <a className='bookmark_link' id='generated3'>arcmarks</a> 
    </div> 

}); 

Answer 1

En supposant que vous avez configuré Babel (ou un autre transpiler) correctement:

return <p>{bookmark.title}</p>; 

devrait fonctionner (pas " s).

Cela compilera à:

React.createElement('p', null, bookmark.title); 

(ou quelque chose de similaire) dans la sortie de JS résultant.

Si vous voulez rendre plusieurs lignes de HTML, enveloppez votre JSX dans () s:

return (
<div> 
    <p>content here</p> 
</div> 
) 

Answer 2

Si vous produisez une itérables de cette manière, React va lancer un avertissement/erreur sur les touches, Donc, vous devez également joindre un identifiant unique. React utilise ces clés pour optimiser le rendu lors de la surveillance des mises à jour du DOM.

Il ressemble à ceci est incorporé dans tout autre code JSX aussi, de sorte que vous devrez peut-être de l'envelopper dans {}

return (
    // ... snip 

    {this.props.bookmarks.bookmarks.map((bookmark) => { 
    return <p key={bookmark.id}>{bookmark.title}</p>; 
    });} 

    // ... snip 
) 

Vous pouvez également optimiser encore plus loin en déstructurant les signets itérables out, et utiliser le retour implicite:

const { bookmarks } = this.props.bookmarks 

return (
    // ... snip 

    {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 

    // ... snip 
) 

Dans mon exemple, bookmark.id pourrait être quelque chose aussi longtemps qu'il est unique, même bookmark.title.

boucler la boucle, je me contenterai d'ajouter un exemple qui montre ce dans certains JSX/HTML supplémentaire de sorte que vous pouvez le voir:

constructor(props) { 
    super(props) 
    // set initial button state to false 
    this.state = { 
    buttonClicked: false 
    } 
} 

// method to handle button clicking 
handleButton(e) { 
    e.preventDefault() 
    console.log('Radical button firing.') 
    // set state to opposite of current 
    this.setState({ buttonClicked: !this.state.buttonClicked }) 
} 

render() { 
    if (!this.props.bookmarks) return <div>Loading...</div> 

    const { bookmarks } = this.props.bookmarks 

    return (
    <div> 
     <h3>Checkout my Rad Books</h3> 

     {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 

     <button onClick={(e) => this.handleButton(e)}>{(!this.state.buttonClicked) ? 'Not Clicked Yet' : 'Was Clicked'}</button> 
    </div> 
) 
} 

Lorsque vous render, vous devez toujours envelopper dans un élément parent, dans ce cas, nous avons utilisé un div. J'ai inclus quelques données riches ici afin que vous puissiez analyser et tester plus avant.

Nous pourrions tout aussi bien aller ici. Nous pouvons tirer cette liste de livre dans une méthode de rendu aussi:

renderBooks() { 
    if (!this.props.bookmarks.bookmarks) return <div>Loading bookmarks...</div> 

    const { bookmarks } = this.props.bookmarks 

    return (
    <div> 
     {bookmarks.map((bookmark) => <p key={bookmark.id}>{bookmark.title}</p>)} 
    </div> 
) 
} 

render() { 
    return (
    <div> 
     <h3>Checkout my Rad Books</h3> 

     {this.renderBooks()} 

     <button onClick={(e) => this.handleButton(e)}>{(!this.state.buttonClicked) ? 'Not Clicked Yet' : 'Was Clicked'}</button> 
    </div> 
) 
} 

Answer 3

return "<p>{bookmark.title}</p>"; 

Vous semblez essayer de interpoler. Vous ne devriez pas avoir besoin de l'interpoler.

return <p>{bookmark.title}</p> should be good. 

Si vous utilisez ES6, vous pouvez interpoler en utilisant des guillemets.

`My name is ${name}`