style用法、封裝數組遍歷、改變數據再次生成真實dom、函數式組件與類組件、對象的處理

時間 2020-10-03 標籤 style 用法封裝數組遍歷改變數據再次生成真實 dom 函數組件對象處理

React的style用法

給jsx代碼中添加樣式，須要將class（保留字） ==> className形式！
給jsx代碼中添加內聯樣式，style={ {} }javascript

<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，不會被瀏覽器渲染css

<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的時候封裝一個函數，在更改數據後再調用一次，使頁面數據進行更新html

<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值}java

<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就能夠獲取到外部傳入的屬性值了。web

<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)json

<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>