2
votes

Passer des accessoires dans un composant stocké dans une variable

J'ai donc une question simple et directe.

Nous pouvons donc stocker les composants de réaction dans une variable. Mais maintenant, je veux savoir s'il est possible de passer des accessoires à un composant s'il est stocké dans une variable?

//////////////////////////////////////////////
//////  Normal & typical React component
//////////////////////////////////////////////

const myComponent = <Hello name={'Jamie'} /> 

render () {

  return myComponent;

}


////////////////////////////////////////
//////  What I want
////////////////////////////////////////

const myComponent = <HelloWorld /> 

// I want to be able to add that props here
// something like myComponent.addProps({'name': 'jamie'});

render () {

  return myComponent;

}

Mon problème va bien au-delà de cela. Je voulais savoir si nous avons une telle fonctionnalité dans l'API React.

javascript reactjs

8 commentaires

Mais pourquoi stockez-vous le composant dans une variable? React fait déjà toutes les différences intelligentes pour vous en fonction de ce que render () retourne, alors utilisez simplement render () {return ; } et laissez React faire son travail.

@ Mike'Pomax'Kamermans comme je l'ai mentionné, le problème n'est pas seulement différent et etc. J'ai environ des centaines de composants et je veux appliquer, filtrer et mapper ces composants avec une logique différente et je veux ajouter des accessoires complètement dynamiques.

Ouais: fais ça en rendu. Générez tous vos composants dans le cadre de votre appel de rendu, et si vous avez des centaines de composants: organisez-les. React est une bibliothèque d'interface utilisateur, et votre interface utilisateur est toujours réductible à «des éléments qui contrôlent une poignée d'autres choses», pas à des centaines de choses. Utilisez state / props pour les données à partir desquelles vous allez générer des composants, puis construisez ces composants dans render (), et laissez React décider si cela signifie qu'il les reconstruit réellement ou non. C'est pour cela qu'il est conçu. Utilisez la propriété key comme prévu et React s'occupe du reste.

Je pense que vous êtes plus préoccupé par d'autres choses que par la question. Il y avait une raison pour laquelle j'ai éliminé d'autres choses et posé simplement cette question. Je veux juste savoir si dans l'écosystème React et l'API nous avons une telle fonctionnalité.

Le problème avec cela est que vous avez réduit votre exemple au point où cela n'a pas de sens: si ce que vous demandez est lié à ce que vous montrez, ce que vous montrez est une mauvaise pratique et ne le faites pas. cette. Veuillez donc modifier votre question en quelque chose pour lequel votre question a du sens? La seule vraie réponse à votre question associée à votre code est «ne faites pas ça».

@ Mike'Pomax'Kamermans Si cela n'a pas de sens pour vous, cela ne veut pas dire que ce n'est pas compréhensible. Ashraful Islam vient de dire une chose et c'était la réponse. Cette simple question n'est-elle pas vraiment compréhensible pour vous?

ce n'est pas parce que quelqu'un d'autre comprend que c'est soudainement une question bien posée. N'oubliez pas que votre question ne s'adresse pas uniquement à vous, elle s'adresse également à tous les autres futurs visiteurs qui ont un problème similaire et qui recherchent une réponse. Si votre question était simplement "si j'ai déjà un composant, comment mettre à jour ses accessoires", alors vous n'avez besoin d'aucune explication et code supplémentaires: demandez simplement cela, sans aucun code qui montre une seule var, et que var uniquement utilisé dans render ().

@ Mike'Pomax'Kamermans Rappelez-vous que vous faisiez attention à beaucoup d'autres détails, tels que l'algorithme différent dans React et .... En incluant ceux en question, ce serait plus déroutant .... J'ai dit et j'ai mentionné que je suis ciblant l'API React mais vous étiez toujours préoccupé par la façon dont je structure mon code ......

3 Réponses :

5
votes

Vous pouvez essayer comme suit,

React.cloneElement(
  myComponent,
  {prop1: "prop value"}
)

Document de référence: React Official Doc

2 commentaires

Merci beaucoup @Asraful, cela m'a beaucoup aidé. Je viens de l'utiliser et j'ai résolu mon problème. Peut-être que ce n'est pas efficace mais ce que vous avez montré est ce dont j'avais besoin. 👍

Comme la réponse de React Official Doc. Je ne pense pas à l'efficacité.

-1
votes

vous pouvez utiliser setProps aussi comme

myComponent.setProps({name: 'jamie'});

0 commentaires

0
votes

Vous devez mettre en majuscule le nom de votre variable et utiliser la syntaxe Jsx normale:

import {
  EmailShareButton,
  FacebookShareButton,
  InstapaperShareButton,
  LineShareButton,
  LinkedinShareButton,
  LivejournalShareButton,
  MailruShareButton,
  OKShareButton,
  PinterestShareButton,
  PocketShareButton,
  RedditShareButton,
  TelegramShareButton,
  TumblrShareButton,
  TwitterShareButton,
  ViberShareButton,
  VKShareButton,
  WhatsappShareButton,
  WorkplaceShareButton,
} from "react-share"

export default class LikeShare extends Component {
  shareButtons = [
    EmailShareButton,
    FacebookShareButton,
    InstapaperShareButton,
    LineShareButton,
    LinkedinShareButton,
    LivejournalShareButton,
    MailruShareButton,
    OKShareButton,
    PinterestShareButton,
    PocketShareButton,
    RedditShareButton,
    TelegramShareButton,
    TumblrShareButton,
    TwitterShareButton,
    ViberShareButton,
    VKShareButton,
    WhatsappShareButton,
    WorkplaceShareButton,
  ]

  render = () => {
    return (
      <div>
        { this.shareButtons.map(
          ShareButton => <ShareButton url={window.location.href}/>
        )}
      </div>
    )
  }
}

Ceci permet des choses comme stocker des composants dans un tableau:

const MyComponent = <HelloWorld /> 

render () {
  return <MyComponent name='jamie'/>
}

0 commentaires