Reactjs: como modificar o estado do componente filho dinâmico ou props do pai?

Estou essencialmente tentando fazer as guias reagirem, mas com alguns problemas.

Aqui está o arquivo page.jsx

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

Quando você clica no botão A, as necessidades de componentes RadioGroup para de-selecionar o botão B .

"Selecionado" significa apenas um className de um estado ou propriedade

Aqui está 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>);
    }

});

A fonte de Button.jsxrealmente não importa, ele tem um botão de opção HTML regular que aciona o onChangeevento DOM nativo

O fluxo esperado é:

• Clique no botão "A"
• O botão "A" aciona onChange, evento DOM nativo, que borbulha para RadioGroup
• O ouvinte RadioGroup onChange é chamado
• RadioGroup precisa de-selecione o botão B . Esta é a minha pergunta.

Aqui está o principal problema que estou encontrando: não consigo <Button>entrarRadioGroup , porque a estrutura disso é que os filhos são arbitrários . Ou seja, a marcação pode ser

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

ou

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

Tentei algumas coisas.

Tentativa:RadioGroup manipulador onChange de In :

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

});

Problema:

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

Tentativa:RadioGroup manipulador onChange de In :

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

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

});

Problema: nada acontece, até eu dou Buttonum componentWillReceivePropsmétodo para a classe

Tentativa: tentei passar algum estado específico do pai para os filhos, então posso apenas atualizar o estado dos pais e fazer com que os filhos respondam automaticamente. Na função render do RadioGroup:

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

Problema:

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.

Solução ruim nº 1 : use o método react-addons.js cloneWithProps para clonar os filhos no tempo de renderização RadioGrouppara poder passar propriedades para eles

Solução ruim nº 2 : implemente uma abstração em torno de HTML / JSX para que eu possa passar as propriedades dinamicamente (me mate):

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

Em seguida, RadioGroupcrie esses botões dinamicamente.

Esta pergunta não me ajuda porque preciso renderizar meus filhos sem saber o que são

Não sei por que você diz que usar cloneWithPropsé uma solução ruim, mas aqui está um exemplo prático de como usá-lo.

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

Aqui está um jsFiddle mostrando em ação.

EDIT : aqui está um exemplo mais completo com conteúdo de guia dinâmico: jsFiddle

Os botões devem ser sem estado. Em vez de atualizar as propriedades de um botão explicitamente, apenas atualize o próprio estado do Grupo e renderize novamente. O método de renderização do Grupo deve então observar seu estado ao renderizar os botões e passar "ativo" (ou algo assim) apenas para o botão ativo.

Talvez a minha seja uma solução estranha, mas por que não usar o padrão do observador?

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

});

talvez você precise de outra coisa, mas eu achei isso muito poderoso,

Eu realmente prefiro usar um modelo externo que forneça métodos de registro de observador para várias tarefas

Crie um objeto que atue como um intermediário entre o pai e o filho. Este objeto contém referências de função no pai e no filho. O objeto é então passado como um suporte do pai para o filho. Exemplo de código aqui:

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