Reactjs: як змінити динамічний стан дочірнього компонента або реквізити від батьківського?

Question 1

По суті, я намагаюся робити вкладки як реакцію, але з деякими проблемами.

Ось файл page.jsx

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

При натисканні на кнопку A, потреба RadioGroup компонент для скасування вибору кнопки B .

"Вибране" просто означає className із стану або властивості

Ось 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>);
    }

});

Джерело Button.jsxнасправді не має значення, у нього є звичайний перемикач HTML, який запускає власну onChangeподію DOM

Очікуваний потік:

Натисніть кнопку "А"
Кнопка "А" запускає onChange, власну подію DOM, яка переходить до RadioGroup
Викликається слухач RadioGroup onChange
RadioGroup потрібно скасувати вибір кнопки B . Це моє запитання.

Ось основна проблема, з якою я стикаюся: я не можу перейти до <Button>sRadioGroup , оскільки структура цього така, що діти є довільними . Тобто розмітка могла бути

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

або

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

Я спробував кілька речей.

Спроба: В RadioGroupобробник OnChange «s:

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

});

Проблема:

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

Спроба: В RadioGroupобробник OnChange «s:

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

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

});

Проблема: Нічого не відбувається, навіть я даю Buttonкласу componentWillReceivePropsметод

Спроба: Я намагався передати певний стан батьків батьків дітям, щоб я міг просто оновити батьківський стан і мати автоматичну відповідь дітей. У функції рендеринга RadioGroup:

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

Проблема:

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.

Погане рішення # 1 : Використовуйте метод response-addons.js cloneWithProps, щоб клонувати дітей під час відтворення, RadioGroupщоб мати можливість передавати їм властивості

Погане рішення # 2 : Реалізуйте абстракцію навколо HTML / JSX, щоб я міг динамічно передавати властивості (вбити мене):

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

А потім в RadioGroupдинамічно будувати ці кнопки.

Це запитання мені не допомагає, тому що мені потрібно виховувати своїх дітей, не знаючи, що вони є

Question 2

Я не впевнений, чому ви говорите, що використання cloneWithProps- це погане рішення, але ось робочий приклад його використання.

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

Ось jsFiddle, який показує його в дії.

EDIT : ось більш повний приклад із вмістом динамічної вкладки: jsFiddle

Question 3

Кнопки повинні бути без громадянства. Замість того, щоб явно оновлювати властивості кнопки, просто оновіть власний стан Групи та повторно рендеріть. Потім метод візуалізації Групи повинен переглядати його стан при отриманні кнопок і передавати "активний" (або щось інше) лише активній кнопці.

Question 4

Можливо, моє дивне рішення, але чому б не використовувати шаблон спостерігача?

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

});

можливо, вам потрібно щось інше, але я знайшов це дуже потужне,

Я справді волію використовувати зовнішню модель, яка надає методи реєстрації спостерігачів для різних завдань

Question 5

Створіть об’єкт, який виконує роль посередника між батьком та дитиною. Цей об'єкт містить посилання на функції як батьківського, так і дочірнього. Потім об’єкт передається як допомога від батьків до дитини. Приклад коду тут:

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