Reactjs-通过更改父状态在同级之间传递信息

我正在创建一个react应用程序，需要用户选择他们的手机品牌和型号。他们可以在一个名为“PhoneModel”的边栏组件中选择他们的手机，我在另一个组件“CaseImg”中显示与该手机对应的图片。PhoneModel和CaseImg是兄弟

我认为这样做的方式是将这些信息保存在家长的状态中，通过“PhoneModel”更改状态，并将其作为道具传递给“CaseImg”

ps：这个应用程序很简单，我不想使用Flux或Redux

---

编辑：修复了我的原始代码中没有提到的打字错误。onClick指向

此操作的结果。handlePhoneSelection（'apple'，'4s'）

而不是

handlePhoneSelection

功能：

因此，在render方法中，

this.handlePhoneSelection（'apple'，'4s'）

在渲染过程中被触发，并尝试更新状态

你需要这样做：

---

this.handlePhoneSelection（'apple'，'4s'）}>

我肯定你的问题中有错，但你的回调缺少右括号，

this.handlePhoneSelection（'apple'，'4s'

，看起来会立即被调用，这会导致无限的渲染周期。你做得正确，但正如@lux指出的那样，你的拼写错误最有可能导致错误。实际上，这是我在这里复制代码时犯的一个拼写错误。这在原始代码中是正确的。我也尝试过，但后来我获取此错误：

预期onClick listener是一个函数，而不是获取类型boolean

…也许我应该在父组件上绑定（this）？此错误消息没有意义…

（）=>this.handlePhoneSelection（'apple'，'4s'））

永远不能是boolean类型？是的，我也不明白。我猜子组件中的处理函数出于某种原因返回false。您是否有其他onClick侦听器？就是这样。我在一个单独的div上进行了另一次onClick，这导致了问题。当我删除它并使用您的语法时，它工作正常。谢谢！

var App = React.createClass({
    getInitialState: function() {
        return {
            phoneBrand: 'Apple',
            phoneName: 'iphone4',
            caseModel: 'bg1'
        };
    },

    handlePhoneSelection: function(phone, name) {
        this.setState({
            phoneBrand: phone,
            phoneName: name
        });
    },

    render: function(){
        return (
            <div>
                <div>
                    <CaseInfo />
                    <CaseImg phoneBrand={this.state.phoneBrand} phoneName={this.state.phoneName} caseModel={this.state.caseModel} />
                    <CustomizeBtns />
                </div>
                <div>
                    <PhoneModel handlePhoneSelection={this.handlePhoneSelection} />
                    <CaseModel />
                    <CustomPicture/>
                </div>
            </div>
        );
    }
})

var PhoneModel = React.createClass({

    handlePhoneSelection: function(brand,model) {
        this.props.handlePhoneSelection(brand,model);
    },

    render: function() {

        return (
                <div>
                    <div onClick={this.handlePhoneSelection('apple','4s')}>
                        <imgsrc="/assets/img/apple-4s.png" />
                    </div>
                    <div onClick={this.handlePhoneSelection('apple','7s')}>
                        <imgsrc="/assets/img/apple-7s.png" />
                    </div>
                    <div onClick={this.handlePhoneSelection('apple','7splus')}>
                        <imgsrc="/assets/img/apple-7splus.png" />
                    </div>
                </div>  
        );
        }
})

setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.