React 学习（一）——组件间传值

1、父组件向子组件传值

子组件使用props接收
父组件内：

<Child fatherName={this.state.name}/>

子组件内：

constructor(props) {
    super(props);
}
render() { 
    return ( 
    	<div>我是子节点，这是我从父结点拿到的值——{this.props.fatherName}</div>
     );
}

2、子组件向父组件传值（子组件调用父组件中的方法修改父组件的值）

React有明确规定，子组件不能操作父组件里的数据的【单项数据流概念】
子组件只能使用父组件传过来的数据，而不能修改这个数据，如果子组件要修改父组件中的数据，则要调用父组件的方法
父组件：

class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            name: '爸爸',
            count: 1
        }
    }
    render() { 
        return ( 
            <div>
                <div>我是父节点——{this.state.name}{this.state.count}</div>
                <Child 
                    fatherName={this.state.name}
                    changeFatherName={this.changeName.bind(this)}
                />
            </div>
         );
    }

    changeName() {
        console.log(this.state.count);
        this.setState({
            count: ++this.state.count
        })
    }
}

父组件中将方法changeName传递个子组件，在子组件中触发

子组件：

class Child extends Component {
    constructor(props) {
        super(props);
        // 构造函数中绑定性能会高一些，特别是在高级组件开发中，会有很大的作用   
        this.handleClick = this.handleClick.bind(this)
    }
    render() { 
        return ( 
            <div>
                <div>我是子节点，这是我从父结点拿到的值——{this.props.fatherName}</div>
                <button onClick={this.handleClick}>点我改变父组件中的值</button>
            </div>
         );
    }

    handleClick() {
        this.props.changeFatherName()
    }
}

子组件中直接使用this.props.changeFatherName()调用父组件中传递过来的方法，即可使用父组件的方法修改父组件的值。

补充PropTypes校验

使用需要先引入PropTypes

import PropTypes from 'prop-types'

然后在子组件的最下方写上如下代码：

①、传值类型校验

Child.propTypes={
    fatherName:PropTypes.string,
    changeFatherName:PropTypes.func,
}

如果我们写错了类型。浏览器将会报错：

②、是否必传校验isRequired

fatherName:PropTypes.string.isRequired

③、默认值defaultProps

Child.defaultProps = {
    fatherName: '爸爸'
}

3、useContext传值

userContext是React Hooks中的知识点，如果对React Hooks完全没有了解，建议先去学习一下React Hooks哦~

在用类声明组件时，父子组件的传值是通过组件属性和props进行的，但是在React Hooks中，使用方法(Function)来声明组件，已经没有了constructor构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。React Hooks 为我们准备了useContext。它可以帮助我们跨越组件层级直接传递变量，实现数据共享。
这里一共三个文件：
1、封装的公共文件

// createContext.js文件

import { createContext } from "react";
const myContext = createContext(null);
export default myContext;

2、父组件

import React, { useState} from "react";
import Counter from './Counter'
import myContext from './createContext'

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h4>我是父组件</h4>
      <p>点击了 {count} 次!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我
      </button>

      {/* 关键代码 */}
      {/* 提供器 */}
      <myContext.Provider value={count}>
        <Counter />
      </myContext.Provider>
    </div>
  );
}
export default App;

这段代码就相当于把count变量允许跨层级实现传递和使用了（也就是实现了上下文），当父组件的count变量发生变化时，子组件也会发生变化。接下来我们就看看一个React Hooks的子组件如何接收到这个变量。

3、子组件

import React, { useContext} from 'react';
import myContext from './createContext'

// 关键代码
function Counter() {
    const count = useContext(myContext);  // 得到父组件传的值
    return (
        <div>
            <h4>我是子组件</h4>
            <p>这是父组件传过来的值：{count}</p>
        </div>
    )
}

export default Counter;

第三种方式是参考https://blog.csdn.net/liaofengji/article/details/104793787自己写了demo实现的，本来自己写的是没有封装的组件的，但是一直报错没解决，所以查询之后换了个方式，之后如果找到了解决办法再来更新。