javascript - Onsen UI + React Navigator.pushPage 不是一个函数？

Question

使用 Onsen playground & React Combining Navigator 和 Tabbar 示例，我做了这个 - https://media.giphy.com/media/fjxPFluObAs5P3cXms/giphy.gif

我想更改添加更多用户的按钮和输入字段的位置，所以我使用了 fab。每当我打电话给navigator.pushPage它时，它都会说TypeError: navigator.pushPage is not a function。

其背后的代码是：

 fabHandleClick() {
      navigator.pushPage({ component: ItemForm, props: { key: 'itemForm' } });
    }


render() {
    return (
        <Page>
            <List
              dataSource={this.props.users}
              renderRow={this.renderList.bind(this, this.props.users, this.props.added, "Add", true)}
            />
            <br />
            <hr />
            <br />
            <List
              dataSource={this.props.added}
              renderRow={this.renderList.bind(this, this.props.added, this.props.users, "Remove", false)}
            />
            <Fab
              onClick={this.fabHandleClick}
              position='bottom right'>
              <Icon icon='md-face' />
            </Fab>

        </Page>
    );
}

提前致谢！

Answer 1

<Page />navigator应该可以通过包装在函数中或作为道具来访问对象

包装示例：

  renderPage = (route, navigator) => (<Ons.Page key={route.title} renderToolbar={() => this.renderToolbar(route, navigator)}>
        <section style={{ margin: '16px', textAlign: 'center' }}>
          <Ons.Button onClick={() => this.fabHandleClick(navigator)}>
              Push Page
            </Ons.Button>
        </section>
      </Ons.Page>);

fabHandleClick(navigator) {
      navigator.pushPage({ component: ItemForm, props: { key: 'itemForm' } });
    }