03react组件传值

react之组件传值（props和useContext的两种方式）：

知识点：
1.组件直接用props传值

class ParentDemo extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        list:[],
      }
    }
    render(){
      return <Fragment>
          <ul>
            {
              this.state.list.map((item,index)=>(
               <ChildDemo avname="波多野结衣" content={item} key={index} index={index} deletItem={this.deletList.bind(this)}></ChildDemo>
              ))
            }
          </ul>
      </Fragment>
  
    }
    deletList(){//方法

    }
}
// class组件传值
class ChildDemo extends Component {
    constructor(props){
        super(props)
        this.state={}
        props.deletItem();//方法
    }
    render() { 
        return ( 
            // 子组建调用父组建的方法
            <li onClick={()=>this.deletItem()}>
               {this.props.avname}为您做- {this.props.content}
            </li>
         );
    }
    deletItem(){
        this.props.deletItem(this.props.index);//父组件的方法
    }
}

//函数组件传值
function CmtItem(props){
    return <div>
        <h1>评论人：{props.user}</h1>
        <p>评论内容：{props.content}</p>
    </div>
}

2.组件传值useContext，跨组件获取

import React, { useContext } from "react";
const TestContext= React.createContext({});//创建一个createContext，里面是初始化的值

const Navbar = () => {
  const { username } = useContext(TestContext);//子组件或者孙子组件内用useContext获取 父组件传的值

  return (
    <div className="navbar">
      <p>{username}</p>
    </div>
  )
}

function App() {
    let state = {
        username: 'superawesome',
    }
  return (
    //父组件用标签Provider包裹起来往下传值
	<TestContext.Provider  value={state}>
		<div className="test">
			<Navbar />
		</div>
	</TestContext.Provider>
  );
}

3.组件传值useContext，跨组件获取（另一种写法）

先定义：

const MyContext = React.createContext()
const {Provider, Consumer} = MyContext;

定义的父组件中,传入的属性需要时value, ChildrenComponents是第一级子组建名称，store是定义的一个变量

<Provider>
    <ChildrenComponents value={this.state.store}></ChildrenComponents> 
</Provider>

使用 的子组件中，用Consumer标签包裹

<Consumer>
    {
        store=>{
            return(
                <div>
                    {store.name}
                </div>
            )
        }
    }
</Consumer>