Question

new to react native，尝试使用导航按钮渲染主页面以进入用户页面。

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

从渲染中返回时，需要为组件指定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，因为你可能没有在render函数中设置任何ref。但是，在我看来，你不应该使用处理程序动态设置引用，而是在渲染函数中。

希望有所帮助

反应原生this.refs.nav未定义

2 个答案: