Reactjs: Wie ändere ich den Status einer dynamischen untergeordneten Komponente oder die Requisiten der übergeordneten Komponente?

Ich versuche im Wesentlichen, Tabs in Reaktion zu bringen, aber mit einigen Problemen.

Hier ist eine Datei page.jsx

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

Wenn Sie auf die Schaltfläche A klicken, muss die RadioGroup-Komponente die Schaltfläche B deaktivieren .

"Ausgewählt" bedeutet nur einen Klassennamen aus einem Status oder einer Eigenschaft

Hier ist 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>);
    }

});

Die Quelle von Button.jsxspielt keine Rolle, es gibt ein reguläres HTML-Optionsfeld, das das native DOM- onChangeEreignis auslöst

Der erwartete Durchfluss ist:

• Klicken Sie auf die Schaltfläche "A"
• Die Schaltfläche "A" löst das native DOM-Ereignis onChange aus, das an RadioGroup weitergeleitet wird
• RadioGroup onChange Listener wird aufgerufen
• RadioGroup muss die Schaltfläche B abwählen . Das ist meine Frage.

Hier ist das Hauptproblem , ich bin die Begegnung: Ich kann nicht mehr bewegen <Button>s inRadioGroup , weil die Struktur dieses so ist , dass die Kinder sind willkürlich . Das heißt, das Markup könnte sein

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

oder

<RadioGroup>
    <OtherThing title="A" />
    <OtherThing title="B" />
</RadioGroup>

Ich habe ein paar Dinge ausprobiert.

Versuch: In RadioGroup's onChange-Handler:

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 });

});

Problem:

Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)

Versuch: In RadioGroup's onChange-Handler:

React.Children.forEach( this.props.children, function( child ) {

    child.props.selected = child.props.value === e.target.value;

});

Problem: Es passiert nichts, auch wenn ich der ButtonKlasse eine componentWillReceivePropsMethode gebe

Versuch: Ich habe versucht, einen bestimmten Status des Elternteils an die Kinder zu übergeben, sodass ich einfach den übergeordneten Status aktualisieren und die Kinder automatisch antworten lassen kann. In der Renderfunktion von RadioGroup:

React.Children.forEach( this.props.children, function( item ) {
    this.transferPropsTo( item );
}, this);

Problem:

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.

Schlechte Lösung Nr. 1 : Verwenden Sie die cloneWithProps- Methode von react-addons.js , um die untergeordneten Elemente beim Rendern in zu klonenRadioGroup ihnen Eigenschaften zu übergeben

Schlechte Lösung Nr. 2 : Implementieren Sie eine Abstraktion um HTML / JSX, damit ich die Eigenschaften dynamisch übergeben kann (töte mich):

<RadioGroup items=[
    { type: Button, title: 'A' },
    { type: Button, title: 'B' }
]; />

Und dann rein RadioGroup bauen Sie diese Schaltflächen dynamisch auf.

Diese Frage hilft mir nicht, weil ich meine Kinder rendern muss, ohne zu wissen, was sie sind

Ich bin mir nicht sicher, warum Sie sagen, dass die Verwendung cloneWithPropseine schlechte Lösung ist, aber hier ist ein funktionierendes Beispiel für die Verwendung.

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var App = React.createClass({
    render: function() {
        return (
            <Group ref="buttonGroup">
                <Button key={1} name="Component A"/>
                <Button key={2} name="Component B"/>
                <Button key={3} name="Component C"/>
            </Group>
        );
    }
});

var Group = React.createClass({
    getInitialState: function() {
        return {
            selectedItem: null
        };
    },

    selectItem: function(item) {
        this.setState({
            selectedItem: item
        });
    },

    render: function() {
        var selectedKey = (this.state.selectedItem && this.state.selectedItem.props.key) || null;
        var children = this.props.children.map(function(item, i) {
            var isSelected = item.props.key === selectedKey;
            return React.addons.cloneWithProps(item, {
                isSelected: isSelected,
                selectItem: this.selectItem,
                key: item.props.key
            });
        }, this);

        return (
            <div>
                <strong>Selected:</strong> {this.state.selectedItem ? this.state.selectedItem.props.name : 'None'}
                <hr/>
                {children}
            </div>
        );
    }

});

var Button = React.createClass({
    handleClick: function() {
        this.props.selectItem(this);
    },

    render: function() {
        var selected = this.props.isSelected;
        return (
            <div
                onClick={this.handleClick}
                className={selected ? "selected" : ""}
            >
                {this.props.name} ({this.props.key}) {selected ? "<---" : ""}
            </div>
        );
    }

});


React.renderComponent(<App />, document.body);

Hier ist eine jsFiddle die es in Aktion zeigt.

BEARBEITEN : Hier ist ein vollständigeres Beispiel mit dynamischem Tab-Inhalt: jsFiddle

Die Tasten sollten zustandslos sein. Anstatt die Eigenschaften einer Schaltfläche explizit zu aktualisieren, aktualisieren Sie einfach den eigenen Status der Gruppe und rendern Sie erneut. Die Rendermethode der Gruppe sollte dann beim Rendern der Schaltflächen ihren Status überprüfen und "aktiv" (oder etwas anderes) nur an die aktive Schaltfläche übergeben.

Vielleicht ist meine eine seltsame Lösung, aber warum nicht Beobachtermuster verwenden?

RadioGroup.jsx

module.exports = React.createClass({
buttonSetters: [],
regSetter: function(v){
   buttonSetters.push(v);
},
handleChange: function(e) {
   // ...
   var name = e.target.name; //or name
   this.buttonSetters.forEach(function(v){
      if(v.name != name) v.setState(false);
   });
},
render: function() {
  return (
    <div>
      <Button title="A" regSetter={this.regSetter} onChange={handleChange}/>
      <Button title="B" regSetter={this.regSetter} onChange={handleChange} />
    </div>
  );
});

Button.jsx

module.exports = React.createClass({

    onChange: function( e ) {
        // How to modify children properties here???
    },
    componentDidMount: function() {
         this.props.regSetter({name:this.props.title,setState:this.setState});
    },
    onChange:function() {
         this.props.onChange();
    },
    render: function() {
        return (<div onChange={this.onChange}>
            <input element .../>
        </div>);
    }

});

Vielleicht benötigen Sie etwas anderes, aber ich fand das sehr mächtig,

Ich bevorzuge es wirklich, ein äußeres Modell zu verwenden, das Beobachterregistermethoden für verschiedene Aufgaben bereitstellt

Erstellen Sie ein Objekt, das als Vermittler zwischen Eltern und Kind fungiert. Dieses Objekt enthält Funktionsreferenzen sowohl im übergeordneten als auch im untergeordneten Objekt. Das Objekt wird dann als Requisite vom Elternteil an das Kind übergeben. Codebeispiel hier:

https://stackoverflow.com/a/61674406/753632