react之傳遞數據的幾種方式props傳值、路由傳值、狀態提高、redux、context

react之傳遞數據的幾種方式

一、父子傳值

父傳值：<子的標籤 value={'aaa'} index={'bbb'}></子的標籤>

子接值：<li key={this.props.index}>{this.props.value}</li>

 

不止能夠傳值也能夠傳遞方法：

父：方法={this.方法}

子：{this.props.方法.bind(this)}

 

 

傳來的參數子組件能夠使用，此處用{value,index}等解構賦值省去this.props

此處的子組件利用這個deleteItem方法向父元素傳遞了index

 

 

父傳子，子爲styled

父：

　　<Lun pic={this.state.good ? this.state.good.image : ''}></Lun>

子：

　　const Lun = styled.div`

　　　　width:100%;

　　　　height:375px;

　　　　background:url('${props => props.pic}') center no-repeat;

　　　　background-size: cover;

　　`

 

---

二、路由傳值

import { BrowserRouter } from 'react-router-dom'

包在最外層，我放在了個人react項目的index.js裏

 

方法一：/路徑/:本身起的要傳的值的名字

父組件：
import { Route, Switch, Redirect } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <Switch>
        <Redirect exact from="/" to="/car"></Redirect>
        <Route path='/home' component={Bar}/>
        <Route path="/shopDetail/:shopId/:shopName/:shopNote/:shopPic" component={ShopDetail} />
        <Route path='/noteDetail/:noteId' component={NodeDe} />
        <Route path='/goodDetail/:goodId/:shopId' component={GoodDetail} />
        <Route path='/car' component={Car} />
      </Switch>
    );
  }
}

export default App;

         子組件： 
         <LogoCon>
            <div>
              <img src='https://ci.xiaohongshu.com/98320dbb-536e-451a-a53f-98724b56d380?imageView2/3/w/420/h/600/format/jpg/q/90' />
              <div>
                <h2>{this.props.match.params.shopName}</h2>
                <h6></h6>
                <h5>{this.props.match.params.shopNote}篇筆記</h5>
              </div>
              <a href="javascript:void(0)">關注</a>
            </div>
          </LogoCon>

 

方法二：

var data = {id:0,name:'lili',age:16};

data = JSON.stringify(data);

var path = `/user/${data}`;



<Link to={path}>用戶</Link>

var data = this.props.location.query;

var {id,name,age} = data;

 

---

 

三、狀態提高：其原理是兩個或者多個組件須要共享的數據放在他們公共的祖先身上，經過props實現共享

L：父組件爲<A></A>

　  子組件爲<B></B>

在父組件中調用子組件：

<A>

　　<B {...props}></B>

</A>

以此類推。

 

---

 

 

四、redux

 

已我本身寫的一個小demo爲例子：

 

大概項目大概如第二張圖，具體應用體如今goodDetail文件夾內

新建一個store文件夾，作一個數據處理的彙總

store/redecers.js

store/redecers.js

import { combineReducers } from 'redux'

import shop from 'pages/shop/reducer'
import car from 'pages/goodDetail/reducer'

export default combineReducers({
    shop,
    car
})

  store/index.js

import { createStore, applyMiddleware } from 'redux'

import thunk from 'redux-thunk'

import reducers from './reducers'

const store = createStore(reducers, applyMiddleware(thunk))

export default store

  goodDetail/actionType.js

export const GET_CAR_DATA = 'car/get_car_data'

  goodDetail/actionCreator.js

import { GET_CAR_DATA } from './actionType'

export const loadCarDataSync = (goods) => {
    //console.log(goods)
    return {
      type: GET_CAR_DATA,
      goods:goods
    }
  }
  
  export const loadCarDataAsync = (dispatch,obj) => {
    // console.log(1)
    //console.log(obj)
    return () => {
        dispatch(loadCarDataSync(obj))
    }
  }

  goodDetail/reducer.js(處理數據)

 

import {GET_CAR_DATA} from './actionType'

const defaultState = {
    goods:[{
      shopName: "豌豆公主海外美妝集合店",
      he:[
        { image: "https://img.xiaohongshu.com/items/4d9747c4f9c03b7c2eafc4d066061968@_320w_320h_1e_1c_0i_90Q_1x_2o.jpg",
          introduce: "clé de Peau Beauté肌膚之鑰 沁肌緊膚水磨精華液 170ml",
          kuSave: 296161,
          num: 4,
          price: 609
        }
      ]
    }
  ]
}

export default (state=defaultState, action) => {
    if (action.type === GET_CAR_DATA) {
      if(!!state.goods){
        const obj = state.goods.find(v => v.shopName === action.goods.shopName )
        if(!!obj){
          const same = obj.he.find(i => i.introduce === action.goods.he[0].introduce )
          console.log(obj)
          if(!!same){
            same.num++;
          }else{
            obj.he.push(...action.goods.he)
          }
          return {
            goods: [...state.goods]
          }
        }else{
          return {
            goods: [...state.goods,action.goods]
          }
        }
      }
      else{
        return {
          goods: [action.goods]
        }
      }
    }

    return state
}  

整個項目最外面的index.html中引入

import store from './store'

 

在goodDetail/goodDetai.js中

import { connect } from 'react-redux'

import {
    Link,
    withRouter
} from 'react-router-dom'


import { loadCarDataAsync } from './actionCreator'


const mapState = (state) => {
    //console.log(state)
    return {
      goods: state.car.goods
    }
}

const mapDispatch = (dispatch) => {
    return {
        loadCategories (obj) {
            //console.log(obj)
            dispatch(loadCarDataAsync(dispatch,obj))
        }
    }
}




中間代碼省略，在你須要的地方調用
          this.props.loadCategories(
                {
                    shopName:this.state.good.vendor_name,
                    he:[{
                        image:this.state.good.image,
                        introduce:this.state.good.desc,
                        price:this.state.good.discount_price,
                        kuSave:this.state.good.fav_info.fav_count,
                        num:Number(this.refs.goodNum.value)
                    }]
                }
            )    （參數可傳可不傳，不傳的話，其他對應的地方記得修改）



export default withRouter(connect(mapState, mapDispatch)(GoodDetail))

 

---

 

 

五、context

不合適修改數據

更適合共享數據

 

getChildContext()

 

祖先組件：

　　1>import PropsTypes from 'prop-types'

　　2>static childCOntextTypes={

　　　　XX:PropsTypes.string

　　　}

　　3>getChildContext(){

　　　　return {XX:xx}

　　　}

　　4>引入一個子組件

 

 

子組件接收：

　　this.context.XX

 

 

 

舊版寫法：demo地址： https://github.com/yangTwo100/react_context_demo

 

新版寫法：

import React from 'react'

const ThemeContext = React.createContext('green');

class App extends React.Component {
  render() {
    return (

    //    此處至關於注入，會覆蓋掉green，value只能寫value
    //   <ThemeContext.Provider value="pink">
    //     <Toolbar />
    //   </ThemeContext.Provider>


    //    這種寫法至關於一個函數調用，此處的background能夠起別的名字
    <ThemeContext.Consumer background={this.context}>
        {context => (
          <Toolbar />
        )}
    </ThemeContext.Consumer>

    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <div style={{background:this.context}} >111</div>;
  }
}



  export default App