Question

我希望拥有可以反应组件的User对象，以便它可以渲染它的配置文件。但我也想访问它的状态，在需要时形成其他组件。我想定义一些可以作为getter工作的方法。所以我想做一些像

这样的事情

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()方法时，它是未定义的。我怎样才能以一种方式访问用户，直接和尽可能少的编码？

Answer 1

有两种方法可以实现这一目标。最惯用的是将更改侦听器传递给组件，只要组件状态发生更改，就会通知该组件。

基本思想是将回调道具传递给组件，并在状态发生变化时更新回调。所以你会有像

这样的东西

    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范例略有不同。我的建议是真正尝试使回调方法适用于您的应用程序体系结构，并且只有在您确定它不适合使用公开组件函数方法时才能使用。

将组件作为经典对象

1 个答案: