React.js 和 ExtJS 4答案

【问题标题】：React.js and ExtJS 4React.js 和 ExtJS 4
【发布时间】：2013-10-14 09:50:49
【问题描述】：

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

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

感谢您的任何想法。

【问题讨论】：

标签： javascript extjs reactjs

【解决方案1】：

将更改传播到第一个共同祖先，该祖先将值保留在其state 中，使用该值的组件通过其props 发送它

即

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

【讨论】：

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