React 组件作为经典对象答案

【问题标题】：React component as classic objectReact 组件作为经典对象
【发布时间】：2016-06-01 11:54:19
【问题描述】：

我想要一个用户对象，它可以作为反应组件，例如它可以渲染它的配置文件。但我也想访问它的状态，在需要时形成其他组件。我想定义一些可以用作吸气剂的方法。所以我想做类似的事情

const User = module.exports = React.createClass({
        propTypes: {
                GoogleUser: React.PropTypes.object
        },
        getInitialState(){
                return {
                        name: 'John Doe',
                        email: 'john@mail.com',
                        id: 123
                };
        },
        render(){
                return '<span>'+this.state.name+'</span>';
        },

        Profile(){
                return {
                    name: this.state.name,
                    email: this.state.email
                };
        }
});

但是当我将创建的元素作为参数传递并访问Profile() 方法时，它是未定义的。我怎样才能以直接访问用户并尽可能少编码的方式做到这一点？

【问题讨论】：

这是你的 React 组件的确切代码吗？它看起来像是 ES6 class 语法（方法声明）和 ES5 语法（React.createClass({...})）的混合体。
不准确，但所有结构都相同。我在我的代码中使用了 render(){} 之类的东西，它可以工作。但是当我发现我能做到这一点时，我也很惊讶：D
我仍在思考所有新的 ES6 语法！很多惊喜。

标签： reactjs

【解决方案1】：

有两种方法可以实现这一点。最惯用的方法是将更改侦听器传递给您的组件，该侦听器将在组件状态更改时收到通知。

基本思想是您将回调 prop 传递给组件，并在状态更改时更新该回调。所以你会有类似的东西

    propTypes: {
        //parent component will declare and pass this observer
        onStateChange: React.PropTypes.func
    },

    getDefaultProps() {
        return {
            //declare default null function
            onStateChange: () => null,
        };
    },

    //call this function whenever a change is made to the state
    handleStateChange(newState) {
        onStateChange(newState);
    }

实现此目的的另一种方法是公开一个函数并使用 refs 访问它。请参阅 React 文档中的 Expose Component Functions。这种方式更接近于您在上面粘贴的代码，但它不太常用，并且与 React 范例有点背离。我的建议是真正尝试让回调方法与您的应用程序架构一起使用，并且只有在您确定它不是使用公开组件函数方法的正确解决方案时。

【讨论】：