style用法、封裝陣列遍歷、改變資料再次生成真實dom、函式式元件與類元件、物件的處理

大熊睡不醒發表於2020-10-02
封裝陣列函式元件物件

React的style用法

給jsx程式碼中新增樣式，需要將class（保留字） ==> className形式！
給jsx程式碼中新增內聯樣式，style={ {} }

<head/>
    <style>
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let arr = [10, 20, 30, 40, 50]
        let arrIndex = 0
        function show(arr){
            return arr.map((item,index)=>{
                return <p 
                    key={index} 
                    className={ arrIndex === index ? "red" : ""}
                    onClick={ ()=>{arrIndex = index; render()} }
                >{item}</p>
            })   
        }
        
        render()
        function render(){
            const a = 
            <div>
                {
                    show(arr)
                }    
            </div>
            ReactDOM.render(a,document.querySelector("#app"))
        }
    </script>
</body>

封裝陣列的遍歷

封裝該函式的時候需要將其通過內部的return返回遍歷後的新陣列，否則瀏覽器預設返回undefined，不會被瀏覽器渲染

<div id="app"></div>
<script type="text/babel">
    let arr = [10, 20, 30]
    let arr2 = ["a","b","c"]
    function showList(arr){
        return arr.map((item,index)=>{
            return <p key={index}>{item}</p>
        })
    }
    const a = 
        <div>
            {showList(arr)}
            {showList(arr2)}
        </div>
        // <div>
        //     {
        //         arr.map((item,index)=>{
        //             return <p key={index}>{item}</p>
        //         })
        //     }   
        //     {
        //         arr2.map((item,index)=>{
        //             return <p key={index}>{item}</p>
        //         })
        //     }    
        // </div>
    ReactDOM.render(a,document.querySelector("#app"))
</script>

資料改變後再次呼叫渲染真實dom

return後面返回一段jsx程式碼的時候，建議後面需要新增()
因為return解析當前行的程式碼，若後面沒程式碼，那就為空
React只是一個view檢視層框架，又不是完整的mvvm框架。當資料改變，檢視肯定不會更新。
那麼就需要給渲染真實dom的時候封裝一個函式，在更改資料後再呼叫一次，使頁面資料進行更新

<head>
    <style>
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let arr = [10, 20, 30, 40, 50]
        let arrIndex = 0
        function show(arr){
            return arr.map((item,index)=>{
                return <p 
                    key={index} 
                    className={ arrIndex === index ? "red" : ""}
                    onClick={ ()=>{arrIndex = index; render()} }
                >{item}</p>
            })   
        }
        
        render()
        function render(){
            const a = 
            <div>
                {
                    show(arr)
                }    
            </div>
            ReactDOM.render(a,document.querySelector("#app"))
        }
    </script>

函式式元件接受形參

函式式元件內部不能訪問this,通過引數props可以接受外部傳入的屬性。
如果外部傳入的屬性需要是number型別，age={number值}

<div id="app"></div>
<script type="text/babel">
    const App = props =>{
        return (
            <div>
                {/*Panda ===  {props.sex} === {props.name} === {props.age}*/}
                {/*Panda === {props.a.sex} === {props.b.name} === {props.b.age}*/}
                Panda === {props.sex} === {props.name}      {/*後面宣告的變數將前面的覆蓋了*/}
            </div>
        )
    }
    let a ={
        sex:"男",
        name:"Panda"
    }
    let b = {
        name :"Big-Panda ",
        age:20
    }
    ReactDOM.render(<App {...a} {...b} />,document.querySelector("#app"))       //展開後的樣子就是第一種
</script>

類元件接受形參

在類元件中，通過this就可以獲取到元件的例項本身，其中this.props.xxx就可以獲取到外部傳入的屬性值了。

<div id="app"></div>
<script type="text/babel">
    class App extends React.Component{
        render(){
            return (
                <div>
                    Panda === {this.props.a.name} === {this.props.sex} === {this.props.age}
                </div>
            )
        }
    }
    let a = {
        name:"Panda"
    }
    let b = {
        age:20
    }
    ReactDOM.render(<App sex={"man"} a={a} {...b} />,document.querySelector("#app"))
</script>

物件的處理

找出物件的鍵：Object.keys(json).map(xxxx)

<div id="app"></div>
<script type="text/babel">
    let obj = {a:1,b:2,c:3,d:4}
    class App extends React.Component{
        render(){
            return (
                <div>
                    {
                        Object.keys(obj).map((item)=>{
                            return <p key={item}>{item}:{obj[item]}</p>
                        }) 
                    }   
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.querySelector("#app"))
</script>

相關文章