Reactjs : 동적 자식 구성 요소 상태 또는 부모에서 소품을 수정하는 방법은 무엇입니까?

Reactjs : 동적 자식 구성 요소 상태 또는 부모에서 소품을 수정하는 방법은 무엇입니까?

---

나는 본질적으로 반응하는 탭을 만들려고 노력하고 있지만 몇 가지 문제가 있습니다.

여기에 파일이 있습니다 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중요하지 않습니다. 기본 DOM onChange이벤트 를 트리거하는 일반 HTML 라디오 버튼이 있습니다.

예상되는 흐름은 다음과 같습니다.

• 버튼 "A"를 클릭하십시오
• 버튼 "A"는 RadioGroup으로 버블 링되는 네이티브 DOM 이벤트 인 onChange를 트리거합니다.
• RadioGroup onChange 리스너가 호출됩니다.
• RadioGroup은 버튼 B의 선택을 취소해야합니다 . 제 질문입니다.

내가 직면 한 주요 문제는 다음과 같습니다. s를으로 이동할 수 없습니다<Button>RadioGroup . 구조가 자식이 임의적 이기 때문 입니다. 즉, 마크 업은

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

또는

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

나는 몇 가지를 시도했다.

시도 : 에서 RadioGroup의 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 });

});

문제:

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가 핸들러를 :

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 : react-addons.js cloneWithProps 메서드를 사용하여 렌더링시 자식을 복제하여 RadioGroup속성을 전달할 수 있습니다.

Bad solution #2: Implement an abstraction around HTML / JSX so that I can pass in the properties dynamically (kill me):

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

And then in RadioGroup dynamically build these buttons.

This question doesn't help me because I need to render my children without knowing what they are

---

I am not sure why you say that using cloneWithProps is a bad solution, but here is a working example using it.

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

Here's a jsFiddle showing it in action.

EDIT: here's a more complete example with dynamic tab content : jsFiddle

---

The buttons should be stateless. Instead of updating a button's properties explicitly, just update the Group's own state and re-render. The Group's render method should then look at its state when rendering the buttons and pass "active" (or something) only to the active button.

---

Maybe mine is a strange solution, but why do not use observer pattern?

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

});

maybe you require something else, but I found this very powerfull,

I really prefer to use an outer model that provide observer register methods for various tasks

참고URL : https://stackoverflow.com/questions/25336124/reactjs-how-to-modify-dynamic-child-component-state-or-props-from-parent