Reactjs: จะแก้ไขสถานะองค์ประกอบลูกแบบไดนามิกหรืออุปกรณ์ประกอบฉากจากพาเรนต์ได้อย่างไร

ฉันพยายามสร้างแท็บในการตอบสนองเป็นหลัก แต่มีปัญหาบางอย่าง

นี่คือไฟล์ page.jsx

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

เมื่อคุณคลิกที่ปุ่ม A, ความต้องการส่วนประกอบ RadioGroup เพื่อยกเลิกการเลือกปุ่ม B

"Selected" หมายถึง 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 ดั้งเดิม

กระแสที่คาดหวังคือ:

• คลิกที่ปุ่ม "A"
• ปุ่ม "A" ทริกเกอร์ onChange ซึ่งเป็นเหตุการณ์ DOM ดั้งเดิมซึ่งจะแสดงขึ้นถึง RadioGroup
• RadioGroup onChange Listener ถูกเรียก
• RadioGroup ความต้องการที่จะยกเลิกการเลือกปุ่ม B นี่คือคำถามของฉัน

นี่คือปัญหาหลักที่ผมกำลังเผชิญหน้ากับ: ผมไม่สามารถย้าย<Button>s เข้าไป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เพื่อให้สามารถส่งผ่านคุณสมบัติได้

ทางออกที่ไม่ดี # 2 : ใช้นามธรรมรอบ ๆ HTML / JSX เพื่อให้ฉันสามารถส่งผ่านคุณสมบัติแบบไดนามิก (ฆ่าฉัน):

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

จากนั้นRadioGroupจะสร้างปุ่มเหล่านี้แบบไดนามิก

คำถามนี้ไม่ได้ช่วยอะไรฉันเพราะฉันต้องเลี้ยงลูกโดยไม่รู้ว่าพวกเขาคืออะไร

ฉันไม่แน่ใจว่าทำไมคุณถึงบอกว่าการใช้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 ที่แสดงการใช้งานจริง

แก้ไข : นี่คือตัวอย่างที่สมบูรณ์ยิ่งขึ้นพร้อมเนื้อหาแท็บแบบไดนามิก: jsFiddle

ปุ่มควรเป็นแบบไร้สัญชาติ แทนที่จะอัปเดตคุณสมบัติของปุ่มอย่างชัดเจนเพียงแค่อัปเดตสถานะของกลุ่มเองแล้วแสดงผลใหม่ จากนั้นวิธีการเรนเดอร์ของ Group ควรดูสถานะเมื่อแสดงผลปุ่มและส่ง "active" (หรือบางอย่าง) ไปยังปุ่มที่ใช้งานอยู่เท่านั้น

บางทีของฉันอาจเป็นวิธีแก้ปัญหาที่แปลก แต่ทำไมไม่ใช้รูปแบบผู้สังเกตการณ์?

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

});

บางทีคุณอาจต้องการอย่างอื่น แต่ฉันพบว่าสิ่งนี้มีประสิทธิภาพมาก

ฉันชอบใช้โมเดลภายนอกที่มีวิธีการลงทะเบียนผู้สังเกตการณ์สำหรับงานต่างๆ

สร้างวัตถุที่ทำหน้าที่เป็นคนกลางระหว่างผู้ปกครองและเด็ก วัตถุนี้มีการอ้างอิงฟังก์ชันทั้งในแม่และลูก จากนั้นวัตถุจะถูกส่งต่อเป็นเสาหลักจากแม่ไปยังลูก ตัวอย่างโค้ดที่นี่:

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