Je suis assez nouveau avec réact de choses, ce que j'essaie, c'est de générer des choses dynamiques à l'aide de .Map ()
Ceci est mon composant: P>
import React, { Component } from "react";
class DynamicStuff extends Component {
state = {
options: [
{ id: 1, optionOne: "OptionOne" },
{ id: 2, optionTwo: "OptionTwo" },
{ id: 3, optionThree: "OptionThree" }
]
};
render() {
const options = [...this.state.options];
return (
<>
{options.map((option) => {
return {option}
})}
<span>{options.optionOne}</span>
<span>{options.optionTwo}</span>
<span>{options.optionThree}</span>
</>
);
}
}
export default DynamicStuff;
5 Réponses :
est-ce que ça va?
Votre portée doit être enveloppée à l'intérieur de la méthode de la carte, lors de sa boucle à chaque fois, chaque portée avec {option.value} s'affiche
Comme il existe un seul paramètre et une seule ligne à revenir, vous pouvez rationaliser la fonction flèche vers Options.map (option => ( {option.value} ))
Vous avez mal effectué votre objet d'options. Nous devons avoir un même attribut sur tous les objets de la matrice.
class App extends React.Component {
state = {
options: [
{ id: 1, option: "OptionOne" },
{ id: 2, option: "OptionTwo" },
{ id: 3, option: "OptionThree" }
]
};
render() {
const options = [...this.state.options];
return (
<>
{options.map((option, index) => (
<li key={index}>{option.option}</li>
))}
</>
);
}
}
La carte utilisée ici est en fait pour convertir l'objet JS en un élément de réact, mais votre utilisation ici est toujours un objet JS après la conversion de la carte. L'élément de réact peut être un {option. Optionone} p> code>.
S'il y a un élément de réact après le retour dans votre carte, il est correct. ou P> {options.map((option) => <p key = {option.id}> {option. optionOne} </p>)}
Vous devez mapper et renvoyer l'élément HTML
p>
return ({
options.map((option) => {
return `<span key={option.id}>${option. option}</span>`
})
}); Vous devriez faire quelque chose comme
Normalement, les objets dans la matrice ont les mêmes clés, mais ici, ils sont options, optionTwo, optionThree. Êtes-vous sûr que l'objet est correct?