反应本机 this.refs.nav 未定义

Question

新反应本机，尝试使用导航按钮呈现主页以转到用户页面。

var TourChampIOs = React.createClass({

    getInitialState() {
       ....
    },

    componentWillMount() {

        ....
    },

    _handleUserDataPress: function() {

        // Get by ref not prop
        this.refs.nav.push({
            component: UserPage,
            title: 'User Page'
        });
    },    
   render: function() {

                return <NavigatorIOS
                    style={styles.container}
                    initialRoute={{
                        title: 'Tour Champ',
                        component: ThemeList,
                        rightButtonTitle: tc.user.displayName.split(' ')[0],
                        onRightButtonPress: this._handleUserDataPress
                    }}/>;

        }

我得到的错误是 Error: Cannot read property 'push' of undefined

Answer 1

当从 render 返回时，你需要为你的组件分配一个 ref 属性，并给出 "nav" 作为它的值

   render: function() {

                return <NavigatorIOS
                    ref="nav" // Here is the change
                    style={styles.container}
                    initialRoute={{
                        title: 'Tour Champ',
                        component: ThemeList,
                        rightButtonTitle: tc.user.displayName.split(' ')[0],
                        onRightButtonPress: this._handleUserDataPress
                    }}/>;

        }

Answer 2

我不确定您要做什么，以及 refs 的使用是否真的适合您的需要。我当然不会使用 ref 来储存你想要点击的页面的参考。

我你还是选择做这种丑陋的事情，只是把ref放在渲染函数中：点击这个！

在 handleClick 函数中检索 ref

handleClick = function() {
    doSomethingWithThisref(this.refs.UserPage);
    // or
    // set a new state for this component
    this.setState({someState:"somedata", function() {
        React.findDOMNode(this.refs.UserPage);
    });
}

ref 用于引用 DOM 而不是 React 渲染函数返回的虚拟 DOM。这是一个很好的例子：https://facebook.github.io/react/docs/more-about-refs.html

顺便说一下，您无法访问 this.refs，因为您可能没有在渲染函数中设置任何引用。但是，在我看来，您不应该使用处理程序动态设置 refs，而应该在渲染函数中设置。

希望对你有帮助

反应本机 this.refs.nav 未定义

react native this.refs.nav is not defined

javascript

facebook

react-native