Javascript React.js和extjs4

我刚刚探索了react.js，我认为它很棒，但我有一个问题。 您知道如何使用React.js呈现extjs布局吗

我知道react.js的设计目的是创建组件，而不是整个布局。所以我认为我需要使它们成为相对的（组件之间的链接操作，比如按钮，使用来自其他输入组件的文本更改某些div的值？）

---

感谢您的建议。

将更改传播到第一个共同祖先，该祖先将值保持在其

状态

，使用该值的组件通过其

道具将其发送过来

i、 e

ColorChangeButton=React.createClass({
render:function（）{
返回
}
});
ColoredDiv=React.createClass({
render:function（）{
返回
}
});
容器=React.createClass({
getInitialState:函数（）{
返回{color:“blue”}
},
onChangeColor:function（）{
this.setState（{color:“red”}）
},
render:function（）{
返回(
)
}
})

对于未来的读者：如果您正在构建一个大型应用程序，而不是传播，那么您应该研究具有集中状态的Flux应用程序结构。

ColorChangeButton = React.createClass({
    render: function() {
        return <button 
                  onClick={this.props.onChangeColor}
                  className={this.props.color} />

    }
});

ColoredDiv = React.createClass({
    render: function() {
        return <div className={this.props.color} />
    }
});

Container = React.createClass({
    getInitialState: function() {
        return { color:"blue" }
    },
    onChangeColor: function() {
        this.setState({color:"red"})
    },
    render: function() {
        return (
          <section>
            <ColorChangeButton 
                color={this.state.color} 
                onChangeColor={this.onChangeColor} />
            <ColoredDiv color={this.state.color} />
          </section>
        )
    }
})