1.前言

算是個小練習吧
比較這種tab頁,選項卡還是非常常用的

2. 效果

1.gif

3.分析

1. 上邊切換按鈕 循環(huán)寫出,配合選中態(tài)
2. 下邊對應的內容也可以循環(huán)寫出,
3. 需要給每個按鈕和 顯示內容做個標記
4. 點擊的時候 修改 state的 值

4. 具體的實現(xiàn) -for

4.1 for-問題

1.png

這個 render要求寫一個表達式,但是 這種for語句不行

4.2 for-問題-解決

封裝一個 函數(shù)
這個 參數(shù) f是循環(huán)函數(shù),我這里作為個一個參數(shù),哪里需要就可以在哪里具體實現(xiàn) 循環(huán)邏輯

 function listFor(f) {
            var list = [];
            f(list)
            return list
        }

5. 切換按鈕- 循環(huán)函數(shù)的使用

1. 可能看上邊封裝的循環(huán)函還比較暈乎 ,結合這里的應用會清楚一點

2. 這個選中態(tài) 是通過 className + 三目元算符來實現(xiàn)的

因為寫的是js代碼 而這個class關鍵字已經(jīng)作為類來使用了,所以樣式類名這里 必須通過className來寫

3. 點擊事件通過 setState修改state 的值

   listFor((list) => {
                            for (let i = 0; i < 10; i++) {
                                list.push(<button  className={this.state.num ==i ? "selected":""} onClick={()=>{this.setState({num:i})}} key={i}>{i} </button>)
                            }
                        })

6. 顯示內容-循環(huán)函數(shù)

1. 這就體現(xiàn)出封裝循環(huán)函數(shù)的時候,把這個循環(huán)邏輯封裝成函數(shù)的好處了
2. 這里其實可以通過瀏覽器的 react插件來修改 num的值進行調試
3. 注意是 循環(huán)的key不要忘記
4. 通過 常規(guī)的 display 來控制內容顯隱

listFor((list) => {
                            for (var i = 0; i < 10; i++) {
                                // 控制臺調試 num的值 測試
                                list.push(<h1 key={i} style={{display:this.state.num ==i ? 'block' :"none"}}>{i} </h1>)
                            }
                        })

7.完整代碼

7.1 選中樣式

<style>
        .selected{
            color:red;
        }
    </style>

7.2 JSX

  function listFor(f) {
            var list = [];
            f(list)
            return list
        }
        class App extends React.Component {
            constructor(){
                super();
                this.state ={
                    num:0
                }
            }
            render() {
                return (<div>
                    {
                        listFor((list) => {
                            for (let i = 0; i < 10; i++) {
                                list.push(<button  className={this.state.num ==i ? "selected":""} onClick={()=>{this.setState({num:i})}} key={i}>{i} </button>)
                            }
                        })
                    }
                    {
                        listFor((list) => {
                            for (var i = 0; i < 10; i++) {
                                // 控制臺調試 num的值 測試
                                list.push(<h1 key={i} style={{display:this.state.num ==i ? 'block' :"none"}}>{i} </h1>)
                            }
                        })
                    }
                </div>)
            }
        }
        ReactDOM.render(<App />, app)

希望想入門的可以自己多練練試試
已經(jīng)入門了,就沒必要在這里浪費時間了

參考資料

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識體系梳理;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉