React学习手册

92

｜

第

5

章

const Recipe = ({ name, ingredients, steps }) =>

<section id={name.toLowerCase().replace(/ /g, "-")}>

<h1>{name}</h1>

<ul className="ingredients">

{ingredients.map((ingredient, i) =>

<li key={i}>{ingredient.name}</li>

)}

</ul>

<section className="instructions">

<h2>Cooking Instructions</h2>

{steps.map((step, i) =>

<p key={i}>{step}</p>

)}

</section>

</section>

const Menu = ({ title, recipes }) =>

<article>

<header>

<h1>{title}</h1>

</header>

<div className="recipes">

{recipes.map((recipe, i) =>

<Recipe key={i} {...recipe} ...