2
votes

ReactJs - Afficher les composants autour d'un composant

Je souhaite afficher un nombre spécifique de composants autour d'un composant. Comment puis je faire ça? :)

Avec cette implémentation, je dessine 8 composants Patrat

{Array.from(Array(8)).map((item, index) =>
    (<Patrat key={index}/>)
)}

Je veux afficher ces 8 Patrat autour d'un cercle qui est aussi un composant.

reactjs html css

4 commentaires

Qu'entendez-vous par «autour»?

Quelque chose comme ça: //bl.ocks.org/bycoffe/3404776?fbclid=IwAR3mzRJMlZnyz13dTKwnIII2pOX2b4blqry0qMxVfDi_Bpg70Is5EOcP6VM "rel =" nofollow noreferrer "> bl.ocks.org/bycoffe

Vous pouvez rendre le cercle responsable du positionnement des éléments, puis avoir Patrats comme enfants du cercle ( Circle> div.circle_element_position> Patrat ) ou si Patrats changera en fonction du composant parent, vous pourriez utiliser la même logique mais utilisez renderProps pour Patrats ( Circle> div.circle_element_position> props.renderPatrat (index) ) reactjs.org/docs/render-props.html

Ok, dans le composant Circle, je peux dessiner les composants Patrat et passer le nombre de Patrats à travers les accessoires. Mais comment puis-je dessiner un composant Patrat autour du cercle?

3 Réponses :

0
votes

Vous pouvez créer une boucle récursive dans laquelle vous créez un nouveau composant Patrat avec l'appel récursif comme enfants .

Exemple

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

function Patrat({ children }) {
  return (
    <div
      style={{
        paddingLeft: 10,
        backgroundColor: "#" + Math.floor(Math.random() * 16777215).toString(16)
      }}
    >
      {children}
    </div>
  );
}

function App() {
  const content = (function patratLoop(num) {
    if (num === 0) {
      return <div> Foo </div>;
    }
    return <Patrat>{patratLoop(--num)}</Patrat>;
  })(8);

  return content;
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

1
votes

Après avoir compris le problème et ce que vous voulez, voici la solution finale

Vous pouvez également créer une fonction qui peut créer dynamiquement une position et la transmettre aux composants enfants

Voici le lien complet de la ressource de code (cliquez ici)

Vous pouvez également expérimenter avec une ligne de commentaire dans le lien de code donné ci-dessus

13 commentaires

Circle est le composant parent et Patrat est le composant enfant. Cercle passez au Patrat le nombre de Patrats qui peuvent se noyer et c'est dorwn, mais pas autour du cercle

Ainsi, avec le parent en cercle, obtenez la taille et en fonction des données, générez la position, puis transmettez-la à l'enfant. si vous n'êtes pas en mesure de le faire, veuillez partager le lien du dépôt pour vous donner un exemple

github.com/LarisPopa/Notice/blob/master/ Frontend / src / compone‌ nts /… , voici mon dépôt, dans GuestsPage.js je dessine les composants Circle et Patrat. Pouvons-nous avoir une discussion sur fb ou quelque chose?

codepen.io/dwarka/pen/XGeGOM : essayez-le avec une astuce CSS

J'ai une implémentation locale, dans Guestspage.js j'ai un composant Circle qui passe par les accessoires au Patrat numberPeople = {table.number_of_people} qui signifie le nombre de Patrat qui devrait être affiché

Veuillez me donner votre compte facebook pour en discuter plus ou votre identifiant skype. Je peux avoir la discussion en 1 heure. C'est bon pour toi?

Votre exemple, codepen.io/dwarka/pen/XGeGOM avec html et css uniquement devrait être correct , Je vais essayer aujourd'hui

Ok, je vais vous ajouter dans 1-2 heures. Est-ce que c'est bon?

ça me va

Avez-vous réussi à le comprendre

Oui, j'ai une implémentation simple par position codée à la main pour chaque Patrat autour de la table, mais ce n'est pas exactement ce que je veux, je veux afficher le composant Patrat de manière dynamique, donc quand j'ai 3 Patrats, je veux montrer plus d'espace entre eux, si j'ai 8 Patrats, je veux montrer un petit espace entre eux, voir exemple: codepen.io/dbpas/pen/...

Si vous avez 3 Patrats, vous voulez plus d'espace ou un espace constant. pouvez-vous expliquer plus

Donnez-moi quelque chose à partager avec vous quelques photos. Je t'ai ajouté sur Skype hier

0
votes

Vous pouvez rendre le cercle responsable du positionnement des éléments, puis avoir Patrats comme enfants du cercle ( Circle> div.circle_element_position> Patrat ) ou si Patrats changera en fonction du composant parent, vous pourriez utilisez la même logique mais utilisez renderProps pour les patrouilles ( Circle> div.circle_element_position> props.renderPatrat (index) )

Cela ressemblerait plus ou moins à ceci:

function Partat()  {
   return <div>1</div>
}

function calculatePositions(numberOfPatrats) {
     //your implementation
}

function Circle ({numberOfPatrats}) {
       let positions = calculatePositions(numberOfPatrats);

       return <div className="circle">
            {positions.map(
                (position, index) => <div style={position} key={index}><Partat /></div>
            )}
       </div>
}

Pour placer Parats sur les positions que vous voulez, il vous suffit de implémentez CalculatePositions, qui sera similaire à ce que vous aviez dans votre exemple jsfiddle.

0 commentaires