react 几种传值方式

react 传值几种方式大概：
props
context
redux
react-router 路由切换时通过url传值（少量非机密数据，其实也是props传）。

一、父组件传给子组件

父组件通过props传递给子组件；

//父组件中
<Child data={[1,2,3]} />
//子组件中
console.log(this.props.data);

二、子组件传给父组件

父组件通过props向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；

//父组件
import Child from './Child.js'；
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父组件
        <Child getData={this.getData}/>
      </div>
    )
  }
}

//子组件
export default class Child extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子组件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}

三、路由传值

1.props.params（推荐）

//设置路由
 <Router history={hashHistory}>
    <Route path='/user/:name' component={UserPage}></Route>
 </Router>

import { Router,Route,Link,hashHistory} from 'react-router';
class App extends React.Component {
  render() {
    return (      
        <Link to="/user/sam">用户</Link>
        // 或者
        hashHistory.push("/user/sam");
    )
  }
}

当页面跳转到UserPage页面之后，取出传过来的值：

export default class UserPage extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<div>this.props.match.params.name</div>)
    }
}

上面的方法可以传递一个或多个值，但是每个值的类型都是字符串，没法传递一个对象,如果传递的话可以将json对象转换为字符串，然后传递过去，传递过去之后再将json字符串转换为对象将数据取出来

//定义路由
<Route path='/user/:data' component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

2.query（不推荐:刷新页面参数丢失）

query方式使用很简单，类似于表单中的get方法，传递参数为明文

//定义路由
<Route path='/user' component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  query:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.query;
var {id,name,age} = data;

3.state（不推荐，刷新页面参数丢失）

state方式类似于post方式，使用方式和query类似

//设置路由
<Route path='/user' component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  state:data,
}
//传值
<Link to={path}>用户</Link>
//或
hashHistory.push(path);
//获取参数
var data = this.props.location.state;
var {id,name,age} = data;

特别提示：
1，获取参数时要用this.props.match.params.name
2，如果在子组件里打印要记得传this.props，如下：

class Todolist extends Component {
    render() {
       return (
           <DocumentTitle title="todolist">
           <div id="home-container">   
           <section>
              <TodolistList {...this.props}/> //不传的话this.props为空对象
           </section>                   
           </div>
           </DocumentTitle>
       );
    }
 }
export default Todolist;

四，非父子组件且嵌套关系复杂的组件之间数据的传递

通过redux来传值的实现
1，我们先写一个createAction的函数

export function setAnalysisParams(params) {
  return {
    type: SET_ANALYSIS_PARAMS,
    result: params
  }
}

2，在reducer里面：

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SET_ANALYSIS_PARAMS:
      return {
        ...state,
        params: action.result
      };
    default:
      return state;
  }

当action触发reducer时，会把action的result传给reducer的params。写好这里，我们就可以在组件中传给adction params了。

@connect(
  () => ({
  }),
  {
    setAnalysisParams
  })

先把actionCreator拿出来。
在组件的某个需要的地方，可以直接向它传我们要放进redux里的数据：

this.props.setAnalysisParams({
        someModels
      });

这时，我们就可以在另外一个组件中取到刚刚放进去的数据。
另外一个组件：

@connect(
  state => ({
    example: state.clinic.params
  }),
  {}
)

把redux中的params数据映射到example上。下面，就可以用了：
const {someNames, …} = this.props.example; //取出数据名