J'essaie essentiellement de faire réagir des onglets, mais avec quelques problèmes.
Voici le fichier page.jsx
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
Lorsque vous cliquez sur le bouton A, les besoins en composants RadioGroup à Désélectionnez bouton B .
"Sélectionné" signifie simplement un nom de classe d'un état ou d'une propriété
Voici RadioGroup.jsx
:
module.exports = React.createClass({
onChange: function( e ) {
// How to modify children properties here???
},
render: function() {
return (<div onChange={this.onChange}>
{this.props.children}
</div>);
}
});
La source de Button.jsx
n'a pas vraiment d'importance, elle a un bouton radio HTML normal qui déclenche l' onChange
événement DOM natif
Le débit attendu est:
- Cliquez sur le bouton "A"
- Le bouton "A" déclenche onChange, un événement DOM natif, qui se propage jusqu'à RadioGroup
- L'écouteur RadioGroup onChange est appelé
- RadioGroup doit bouton de sélection-B . Telle est ma question.
Voici le problème principal que je rencontre: je ne peux pas <Button>
entrerRadioGroup
, car la structure de ceci est telle que les enfants sont arbitraires . Autrement dit, le balisage pourrait être
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
ou
<RadioGroup>
<OtherThing title="A" />
<OtherThing title="B" />
</RadioGroup>
J'ai essayé plusieurs choses.
Tentative: dans RadioGroup
le gestionnaire onChange:
React.Children.forEach( this.props.children, function( child ) {
// Set the selected state of each child to be if the underlying <input>
// value matches the child's value
child.setState({ selected: child.props.value === e.target.value });
});
Problème:
Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)
Tentative: dans RadioGroup
le gestionnaire onChange:
React.Children.forEach( this.props.children, function( child ) {
child.props.selected = child.props.value === e.target.value;
});
Problème: rien ne se passe, même je donne Button
une componentWillReceiveProps
méthode à la classe
Tentative: j'ai essayé de transmettre un état spécifique du parent aux enfants, afin que je puisse simplement mettre à jour l'état parent et que les enfants répondent automatiquement. Dans la fonction de rendu de RadioGroup:
React.Children.forEach( this.props.children, function( item ) {
this.transferPropsTo( item );
}, this);
Problème:
Failed to make request: Error: Invariant Violation: exports: You can't call
transferPropsTo() on a component that you don't own, exports. This usually
means you are calling transferPropsTo() on a component passed in as props
or children.
Mauvaise solution n ° 1 : utilisez la méthode react-addons.js cloneWithProps pour cloner les enfants au moment du rendu RadioGroup
afin de pouvoir leur transmettre des propriétés
Mauvaise solution n ° 2 : implémenter une abstraction autour de HTML / JSX pour que je puisse passer les propriétés dynamiquement (tuez-moi):
<RadioGroup items=[
{ type: Button, title: 'A' },
{ type: Button, title: 'B' }
]; />
Et puis en RadioGroup
construisez dynamiquement ces boutons.
Cette question ne m'aide pas car j'ai besoin de rendre mes enfants sans savoir ce qu'ils sont
RadioGroup
-ils savoir dont ils ont besoin pour réagir à un événement de ses enfants arbitraires? Il doit nécessairement savoir quelque chose sur ses enfants.React.addons.cloneWithProps
et transmettez les nouveaux accessoires que vous souhaitez qu'il ait.props
sont immuables, vous créez donc un nouveau hachage, le fusionnez avec les accessoires actuels et vous transmettez le nouveau hachageprops
à une nouvelle instance du composant enfant.Réponses:
Je ne sais pas pourquoi vous dites qu'utiliser
cloneWithProps
est une mauvaise solution, mais voici un exemple concret de son utilisation.Voici un jsFiddle le montrant en action.
EDIT : voici un exemple plus complet avec un contenu d'onglet dynamique: jsFiddle
la source
this
. Y a-t-il un réel avantage, à part avoir utilisé React?Les boutons doivent être sans état. Au lieu de mettre à jour les propriétés d'un bouton explicitement, mettez simplement à jour l'état du groupe et effectuez un nouveau rendu. La méthode de rendu du groupe devrait alors regarder son état lors du rendu des boutons et passer "actif" (ou quelque chose) uniquement au bouton actif.
la source
Peut-être que la mienne est une solution étrange, mais pourquoi ne pas utiliser de modèle d'observateur?
peut-être avez-vous besoin d'autre chose, mais j'ai trouvé cela très puissant,
Je préfère vraiment utiliser un modèle externe qui fournit des méthodes de registre d'observateurs pour diverses tâches
la source
Button.jsx
?onChange()
etonChange(e)
Créez un objet qui agit comme intermédiaire entre le parent et l'enfant. Cet objet contient des références de fonction dans le parent et l'enfant. L'objet est ensuite passé comme accessoire du parent à l'enfant. Exemple de code ici:
https://stackoverflow.com/a/61674406/753632
la source