标签只安装在它第一次成为选项卡的内容积极

我想加载仅在第一次被激活的标签内容，该内容停留在DOM标签只安装在它第一次成为选项卡的内容积极

这之后是我

<Tabs defaultActiveKey={1} animation={false} id="my-tabs" mountOnEnter unmountOnExit> 
    <Tab eventKey={1}> 
     <div>content1</div> 
    </Tab> 
    <Tab eventKey={2}> 
     <div>content1</div> 
    </Tab> 
    </Tabs>

它工作正常，但切换选项卡之间存在延迟，因为我拥有的内容非常大，我希望只在第一次变为活动状态时才渲染它。

有没有办法做到这一点？我正在使用react-bootstrap 0.30.10

来源

2017-06-28 lightbringer

这听起来像是React提供的“避免调整”选项的一个很好的用例。

Here's a link to the relevant section in the documentation.

从本质上讲，有一个生命周期事件称为shouldComponentUpdate，默认为true。当您将其更改为false时，它会告诉React不要通过标准对帐流程运行组件（即“差异”检查）。

与任何生命周期方法一样，您可以为其创建条件语句。

对于之后应该进行完全静态的组件的第一渲染，这真的是你所需要的：

class YourComponent extends React.Component { 
    ... 
    shouldComponentUpdate() { 
    return false; 
    } 
    ... 
}

然而，对于一个较为普遍的情况下，你会想要写一个条件语句基于道具和/或组件的状态：

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     // Your state 
    }; 
    } 

    shouldComponentUpdate(nextProps, nextState) { 
     // A conditional statement to determine whether 
     // this component should check for updates or not 
    } 

    render() { 
    return (
     <div> 
      {/* Your JSX*/} 
     </div> 
    ) 
    }

来源

2017-06-28 03:24:37

感谢您的回答，我想我会用组件更新生命周期方法来包装Tab，看看我是否可以解决它。随着我一起去更新主题。我仍然认为图书馆应该支持延迟加载。 – lightbringer

延迟加载React组件？这是webpack可以处理的事情：https://webpack.js.org/guides/lazy-load-react/ –

我不想只是懒加载一个通用组件，我想懒加载一些组件，这些组件是儿童的其他组件。我认为它与webpack的做法有些不同 – lightbringer

我不使用自举做出反应，但我想它是基于组件的设计，例如，使用TabIndex的状态下呈现的内容。仔细看一下这个示例代码：

renderActiveTabContent() { 
    const { children } = this.props 
    const { activeTabIndex } = this.state 
    if (children[activeTabIndex]) { 
     return children[activeTabIndex].props.children 
    } 
    }

因此，内容组件每次都对Tab状态进行索引。

您可以使用https://github.com/reactjs/react-tabs为您的解决方案另外明智地看看这些代码来编写一个简单的代码，通过display:样式属性呈现Component一次并显示/隐藏状态。

希望它的帮助。

来源

2017-06-28 04:43:36

我只想让Tab首次呈现，因此在任何时候DOM已经生成并且不会再次更新，除非它自己的状态改变。您提供的示例似乎会在每次选项卡变为活动时重新呈现内容。 – lightbringer

尝试在'Tabs' remove'unmountOnExit'由于 https://github.com/react-bootstrap/react-bootstrap/blob/master/src/TabContent.js 线26-29 '卸载选项卡（当它们不再可见时，将其从DOM中移除） –

UPDATE：

显然mountOnEnter必须animation使用，否则按预期将无法正常工作。我所做的更改，它工作正常现在

旧答案：

，所以我想出了这个包裹组件如下

class TabsLazyLoad extends Component { 

    constructor(props) { 
    super(props); 
    this.state = this.getInitialState(); 
    this.handleSelect = this.handleSelect.bind(this); 
    } 

    getInitialState() { 
    return { 
     key: this.props.key || this.props.defaultActiveKey, 
     rendered: [], 
    }; 
    } 

    addRenderedTab(key) { 
    const newState = _.cloneDeep(this.state); 
    newState.rendered.push(key); 
    this.setState(newState); 
    } 

    handleSelect(key) { 
    this.setState({ key }); 
    } 

    render() { 
    return (
     <Tabs activeKey={this.state.key} onSelect={this.handleSelect} {...this.props}> 
     {_.map(this.props.children, (tabComponent) => { 
      if (_.includes(this.state.rendered, tabComponent.props.eventKey)) { 
      return tabComponent; 
      } 
      if (tabComponent.props.eventKey === this.state.key) { 
      this.addRenderedTab(this.state.key); 
      } 

      // if it's not rendered, return an empty tab 
      const emptyTab = _.cloneDeep(tabComponent); 
      emptyTab.props.children = null; 
      return emptyTab; 
     })} 
     </Tabs> 
    ); 
    } 
} 

TabsLazyLoad.propTypes = Tabs.propTypes;

这似乎是工作正常，但我认为这有点hacky，但这是我现在能想到的最好的。

来源

2017-06-28 07:20:18 lightbringer

标签只安装在它第一次成为选项卡的内容积极

回答

相关问题