React组件通信--props

React组件通信

1、props接收数据

//index.js
import App from "./App";

ReactDOM.render(
  <App 
  name='传递数据' 
  age={19}
  color={[1,2,3]}
  fn={()=>{console.log('函数')}}
  tag={<p>段落</p>}
  />,document.getElementById("root")
);

第一种方式：函数组件props通过参数接收

//app.js
function App(props) {
  function myClick(e) {
    console.log(props);
  }
  return (
    <div className="App">
      <button onClick={myClick}>按钮</button>
    </div>
  );
}
export default App;

第二种方式：类组件通过this.props.直接访问

class App extends React.Component {
  render() {
    return (
      <div>
        <span>props: {this.props.name}</span>
      </div>
    );
  }
}
export default App;

特点:

1. 可以给组件传递任意类型的数据
2. props是只读的对象，只能读取属性的值，无法修改对象
3. 使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取props

class Hello extends React.Component {
	constructor(props){
		super(props)
		console.log(props)
	}
	render(
		return(
			<div></div>
		)
	)
}

2、父传子

使用props：

//父组件
import Children from "./Children";

class App extends React.Component {
  state = {
    data: "父组件state数据",
  };
  render() {
    return (
      <div>
        <span>props: {this.props.age}</span>
        <div style={{ color: "red", border: "1px solid #f00" }}>
          子组件：
          <Children data={this.state.data} />
        </div>
      </div>
    );
  }
}
export default App;

//子组件
import React from "react";

class Children extends React.Component {
  render() {
    return (
      <div>
        <h3> childrens </h3>
        <p>
          数据：{this.props.data}
        </p>
      </div>
    );
  }
}

export default Children;

3、子传父

利用回调函数，父组件提供回调，子组件调用

//父组件
import Children from "./Children";
class App extends React.Component {
  state = {
    data: "父组件state数据",
    data2: "",
  };
  getChildData = (val) => {
    console.log("val", val);
    this.setState({
      data2: val,
    });
  };
  render() {
    return (
      <div>
        <span>props: {this.props.age}</span>
        <div style={{ color: "red", border: "1px solid #f00" }}>
          子组件：
          <Children data={this.state.data} getChildData={this.getChildData} />
          子组件数据：
          {this.state.data2}
        </div>
      </div>
    );
  }
}

export default App;

//子组件
class Children extends React.Component {
  sendData = () => {
    this.props.getChildData("子组件传递数据");
  };
  render() {
    return (
      <div>
        <h3> childrens </h3>
        <p onClick={this.sendData}>数据：{this.props.data}</p>
      </div>
    );
  }
}

export default Children;

4、兄弟组件传值

用父级做中间件，子传父，父再传子

//children1
import React from "react";

class Children extends React.Component {
  sendData = () => {
    this.props.getChildData("子组件传递数据");
  };
  render() {
    return (
      <div>
        <h3> childrens </h3>
        <p onClick={this.sendData}>点击children1</p>
        数据：{this.props.data}
      </div>
    );
  }
}

export default Children;

//Children2 
import React from "react";
class Children2 extends React.Component {
  render() {
    return (
      <div>
        显示兄弟children组件的数据：
        {this.props.data}
      </div>
    );
  }
}

export default Children2;

//App 父组件
import Children from "./Children";
import Children2 from "./Children2";
class App extends React.Component {
  state = {
    data: "父组件state数据",
    data2: "",
  };
  getChildData = (val) => {
    console.log("val", val);
    this.setState({
      data2: val,
    });
  };
  render() {
    return (
      <div>
        <span>props: {this.props.age}</span>
        <div style={{ color: "red", border: "1px solid #f00" }}>
          子组件：
          <Children data={this.state.data} getChildData={this.getChildData} />
          父组件显示子组件数据：
          {this.state.data2}
          子组件2：
          <Children2 data={this.state.data2} />
        </div>
      </div>
    );
  }
}

export default App;

其实都是用了props

5.children属性

• children属性：表示组件标签的子节点，当组件标签有子节点时，props就会有该属性。
• 与props属性一样，值可以是任意值（文本、dom、甚至函数）

function Hello(props) {
	return {
		<div>
			组件是子节点：{props.children}
		</div>
	}
}

<Hello> 我是子节点 </Hello>

6.props深入

1. 安装prop-type（npm i prop-types）
2. 导入prop-type包
3. 使用 组件名.propType = {} 来给组件的props添加校验规则

import PropTypes from 'prop-types'
function App(props){
	return {
		<h1>Hi, {props.colors}</h1>
	}
}
App.proptypes = {
	//约束colors属性为arrray类型
	colors: Proptypes.array
	//类型有： array、bool、func、number、object、string、element
}

4. 必填：(.isRequired)

requireFunc: PropTypes.func.isRequired

5. 指定特定结构的对象：（shape({ })）

oprionalObjectWithShape: PropType.shape({
	color: PropType.string,
	fontSize: PropsTypes.number
})