1

下面是一个带有三个选项卡的 Tabbar 的简单示例。在第二个中，我使用状态变量在渲染时在两个组件之间切换。如果我在三个选项卡之间浏览，一切看起来都不错。但是，一旦我在第二个选项卡中切换组件（首先单击浮动按钮，然后单击后退按钮），选项卡栏就无法正常工作。如果我这样做并返回到第 1 页，它看起来就像导航到第 1 页一样，但它仍然显示第 2 页的内容。如果我切换并转到第 3 页，它工作正常。另外，如果我在第 2 页中进行切换，请转到第 1 页，然后在页面之间来回单击一下，它会再次开始工作。

当我从一个页面转到具有更高索引的页面时，它似乎开始工作（这就是为什么它在直接进入第 3 页时工作）。

我做错了什么，或者这是 Onsen UI 中的错误？

这是示例代码（我使用 Meteor、React 和 Onsen UI）：

import React, { Component } from 'react';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import ons from 'onsenui';
import {Page,Tabbar, Tab,Toolbar, Fab, BackButton, Icon} from 'react-onsenui';

export default class App extends Component {
  constructor() {
    super();
    this.state = {index: 0};
  }

  renderTabs() {
    return [
      {
        content: <Page1 key="t1"/>,
        tab: <Tab label='Page1' key="b1" />
      },
      {
        content: <Page2 key="t2"/>,
        tab: <Tab label='Page 2' key="b2" />
      },
      {
        content: <Page3 key="t3"/>,
        tab: <Tab label='Page 3' key="b3" />
      }
    ];
  }

  render() {
    return(
      <Tabbar
        index={this.state.index}
        onPreChange={(event) =>
          {
            if (event.index != this.state.index) {
              this.setState({index: event.index});
            }
          }
        }
        renderTabs={() => this.renderTabs()}
        />
    );
  }
}

class Page1 extends Component {
  render() {
    return (
      <Page>
        <div>Page 1</div>
      </Page>
    );
  }
}

class Page2 extends Component {
  constructor() {
    super();
    this.state = { showTest: false};
  }

  showTest(show) {
    this.setState({showTest: show});
  }

  render() {
    return (
      this.state.showTest ?
      <Show2 showTest={(show) =>this.showTest(show)} />
      :
      <Show1 showTest={(show) =>this.showTest(show)} />
    );
  }
}

class Show1 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='center'>Show 1</div>
      </Toolbar>
    );
  }
  renderFixed() {
    return(
      <Fab position="bottom right" onClick={() => this.props.showTest(true)}><Icon icon='md-plus'/></Fab>
    );
  }
  render() {
    return (
      <Page renderToolbar={this.renderToolbar} renderFixed={() => this.renderFixed()}>Show 1</Page>
    );
  }
}

class Show2 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='left'><BackButton onClick={() => this.props.showTest(false)}>Back</BackButton></div>
        <div className='center'>Show 2</div>
      </Toolbar>
    );
  }
  render() {
    return (
      <Page renderToolbar={() => this.renderToolbar()}>Show 2</Page>
    );
  }
}

class Page3 extends Component {
  render() {
    return (
      <Page>
        <div>Page 3</div>
      </Page>
    );
  }
}
4

1 回答 1

0

恕我直言，您所做的很好。应该是很久以前的bug了。

使用OnsenUI 2.10.10和React 16.4.2 ，您的代码现在似乎可以工作了。当我在页面之间来回切换时，当我改变 Page2 上的状态时，甚至当我使用后退按钮时，效果都很好。

于 2020-10-06T17:47:38.120 回答