Ce que je veux faire, en utilisant la carte, est assez simple.
Je veux appeler ceci:
const contentTop = props.sizer.map((item)=> <Stripe></Stripe>)
Pour obtenir ceci:
const Striper = (props) => {
const contentTop=props.sizer.map((item)=> <Stripe>)
const contentBottom=props.sizer.map((item)=> </Stripe>)
return (
<div>
{contentTop}
{contentBottom}
</div>
)
}
J'ai essayé de cette façon, mais échoue:
<>
<Stripe>
<Stripe>
<Stripe>
Hey everybody!
</Stripe>
</Stripe>
</Stripe>
</>
Fondamentalement, seul cela fonctionne (ce qui n'est pas ce que je veux):
<Striper size={3} text={"Hey everybody!"}/>
Comment pourrais-je obtenir ce que je veux?
3 Réponses :
Je suppose que vous pouvez réaliser quelque chose comme avec cette approche:
import React from 'react';
import { render } from 'react-dom';
const Stripe = () => <span> – </span>
const App = ({ size, text }) => {
const arrFromNum = Array.from(Array(size), (x, i) => i + 1)
return (
<React.Fragment>
{arrFromNum.map(x => <Stripe />)}
{text}
{arrFromNum.map(x => <Stripe />)}
</React.Fragment>
)
}
render(<App size={4} text="Hello" />, document.getElementById('root'));
Est-ce que cela répond à votre question?
Cela n'aurait-il pas des composants Stripe de taille avant et après? Je pense qu'il les veut imbriqués.
@DillanWilding Vous avez raison, cela ne les imbrique pas. Probablement oublié. Si l'OP n'a pas encore de solution, veuillez le dire. Je serai plus qu'heureux de réviser ma réponse!
Merci pour cela - je l'ai étudié, mais comme Dillan l'a dit, ce n'est pas imbriqué. Ce que je veux retourner de
J'ai finalement compris, w / reducer étant la clé de la solution: const content = props.sizer.reduce ((total, currentValue) =>
@jumar, il est fortement recommandé d'écrire une réponse à votre propre question et de l'accepter (après un certain temps).
D'accord; Je vais y répondre, sous peu.
Voici un moyen possible de nombreuses possibilités différentes en fonction de votre scénario:
export default ({size, text}) => <>
export default ({size}) => <> {Array (size) .fill (). map (_ => Stripe!
)} ;
Merci (même si j'ai fini par utiliser une solution différente, voir mes commentaires ci-dessus).
La solution a fini par être très simple (merci, Emile ): utilisez .reduce .
Comme il est dit dans la documentation sur la réduction, c'est vraiment utile lorsque vous n'avez besoin que d'une seule chose retournée. Et c'est ce dont j'avais besoin.
En tant que J'ai dit dans un commentaire :
Ce que je veux retourner de
est vraiment, mais parce que je dois retourner un objet entier, le plus proche que je puisse venir avec la carte estBonjour .Bonjour Bonjour
À la place, utilisez réduire.
C'est la solution, dont le fonctionnement a été vérifié. (Remarque: je suis quelque peu passionné à propos de size = {3} quand il s'agit en fait d'un tableau, car je sais comment faire ça, ce n'est pas ma question mais vous pouvez voir mon implémentation dans réponse ci-dessous).
const arr = Array(6).fill("this is my text!");
return (
<div>
<Striper sizer={arr} colors={colours}/>
</div>
);
Et comme on l'appelle en fait:
const Striper = (props) => {
const content = props.sizer.reduce(
(total, currentValue) => <Stripe color={props.colors}>{total}</Stripe>
)
return (
<div>
{content}
</div>
)
}
Utilisez
.reduceà la place.Vous ne transmettez pas un tableau sur lequel vous essayez d'utiliser les méthodes Array.
Désolé, j'aurais dû préciser que la façon dont je l'appelle vraiment dans le code est: const arr = Array (6) .fill (1); return (
J'ai publié une réponse en utilisant un code similaire, voyez si cela correspond à vos besoins
Merci Emile, après avoir lutté un peu plus, j'ai finalement compris, w / reducer étant la clé de la solution: const content = props.sizer.reduce ((total, currentValue) => {total} ), appelée ainsi, version simplifiée: const arr = Array (6) .fill ("ceci est mon texte!");