如何在使用任何庫時實現製表符？

-1

請問您能否告訴我如何在使用任何庫時執行選項卡？我按照此鏈接並試圖製作標籤 https://toddmotto.com/creating-a-tabs-component-with-react/ 但未成功。這裏是我的代碼：如何在使用任何庫時實現製表符？

https://codesandbox.io/s/D9Q6qWPEn

import React, {Component} from 'react'; 

class Tabs extends Component { 
    constructor() { 
    super(); 
    this.state= { 
     selected:0 
    } 
    } 
    _renderContent() { 
    return (
     <div className="tabs__content"> 
     {this.props.children[this.state.selected]} 
     </div> 
    ); 
    } 
    render() { 
    return (
    <div className="tabs"> 
     {this._renderContent()} 
     </div> 
    ) 
    } 
} 

export default Tabs;

我不能夠顯示選項卡，然後單擊 任何更新後，它有單獨的內容是什麼？

來源

2017-07-30 naveen

你遇到任何特別的問題嗎？ – zerkms

@zerkms我無法顯示標籤，點擊後它有單獨的內容 – naveen

-1

如果你只有一把錘子，一切看起來都像釘子

不要嘗試使用反應一切。這不僅是一種不好的做法。 React從來沒有打算達到這個目的。創建標籤是90％的CSS，只有10％JS（控制哪些人得到了「激活」狀態。

我創建了一個使用CSS標籤實現100％的例子，它不會很好，因爲只有後工作標籤被點擊顯示的內容，沒有默認值

如果你想在React組件中自動化這個（例如）你必須做的唯一的事情是將一個標籤點擊綁定到活動狀態一個類名代表active state（例如：tab - active）。並創建一個默認值。

.tabs__list-item { 
 
    display: inline; 
 
} 
 

 
.tab { 
 
    display: none; 
 
} 
 

 
.tab:target { /* Only works if tab is clicked, can be fixed with React. */ 
 
    display: block; 
 
}

<nav class="tabs"> 
 
    <ul class="tabs__list"> 
 
    <li class="tabs__list-item"><a class="tabs__link" href="#tab1">Tab 1</a></li> 
 
    <li class="tabs__list-item"><a class="tabs__link" href="#tab2">Tab 2</a></li> 
 
    <li class="tabs__list-item"><a class="tabs__link" href="#tab3">Tab 3</a></li> 
 
    </ul> 
 
</nav> 
 

 
<section class="tab" id="tab1"> 
 
    <h1>Tab 1 header</h1> 
 
    <p>This is the content of tab 1.</p> 
 
</section> 
 

 
<section class="tab" id="tab2"> 
 
    <h1>Tab 2 header</h1> 
 
    <p>This is the content of tab 2.</p> 
 
</section> 
 

 
<section class="tab" id="tab3"> 
 
    <h1>Tab 3 header</h1> 
 
    <p>This is the content of tab 3.</p> 
 
</section>

簡而言之：

寫HTML結構/ CSS標記第一
觀察丟失邏輯
實現使用最佳工具丟失邏輯。

爲了達到這個目的，React可能是一個有效的工具，但是首先讓React渲染你的HTML和CSS。如果您無法獲得「佈線」邏輯，請打開一個問題，指出您遇到的具體問題。

來源

2017-07-30 11:23:08

如果我正確理解您的問題，您只需要爲標籤顯示標籤。

可以在React做到這一點在許多方面，但不改變你的代碼太多了，你可以通過改變Tabs組件的render()方法完成這一任務，如下圖所示：

setTab(index) { 
    this.setState({ 
    selected: index, 
    }); 
} 

_renderLabels() { 
    return this.props.children.map((child, index) => (
    <div key={child.props.label} onClick={() => { this.setTab(index) }}> 
     {child.props.label} 
    </div> 
)); 
} 

render() { 
    return (
    <div className="tabs"> 
     {this._renderLabels()} 
     {this._renderContent()} 
    </div> 
); 
}

我們在這裏做的基本上是根據props.children提供標籤。對於每個標籤，我們追加點擊處理程序。

您可以通過創建特定組件如TabPane,TabLabel來改善此代碼。

完整代碼Tabs組件。

import React, { Component } from "react"; 

class Tabs extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     selected: 0 
    }; 
    } 

    setTab(index) { 
    this.setState({ 
     selected: index, 
    }); 
    } 

    _renderContent() { 
    return (
     <div className="tabs__content"> 
     {this.props.children[this.state.selected]} 
     </div> 
    ); 
    } 

    _renderLabels() { 
    return this.props.children.map((child, index) => (
     <div key={child.props.label} onClick={() => { this.setTab(index) }}> 
     {child.props.label} 
     </div> 
    )); 
    } 

    render() { 
    return (
     <div className="tabs"> 
     {this._renderLabels()} 
     {this._renderContent()} 
     </div> 
    ); 
    } 
} 

export default Tabs;

演示：https://codesandbox.io/s/pRvG6K0r

來源

2017-07-30 12:09:59 hinok

如何在使用任何庫時實現製表符？

回答

相關問題