Article directory
parent-child component pass-by-value
In react, the method of props can be used for parent-to-child, and the callback function of props is used for child-to-parent
parent component:
define the state in the parent component, and pass this state object to the child component, so you can directly write {… this.state}
import React, {
Component } from 'react'
import Son from './son'
export class Parent extends Component {
constructor() {
super()
this.state = {
name: '父组件',
msg: '这是父组件的信息'
}
}
render() {
return (
<div>
<h1>Parent Page</h1>
<h2>我是父组件的：{
msg}--{
name}</h2>
<Son {
...this.state} parentChange={
this.parentChange.bind(this)}/>
</div>
)
}
}
export default Parent
Child component:
write parentMsg: props.msg in the state, so that parentMsg can be displayed directly on the page, that is, the value passed by the parent component
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}</p>
</div>
)
}
}
export default Son
Parent-child component duplication problem solved
The parent component has name, msg, and the child component also has the name of the variable. How to do it if you want to use it together?
In the subcomponent, the state is its own, and the props is passed in from the outside, so we can alias the variables in the props:
if we don't want to use an alias, we can also use this.state.name directly ,this.props.name
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name: pName, msg: pMsg } = this.props
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}-{
pName}-{
pMsg}</p>
</div>
)
}
}
export default Son
The child component changes the value of the parent component
We define an input box in the child component, and hope to change the value displayed by the parent component through this input box:
idea : write the method in the parent component and call it in the child component
Parent component:
1. Define the function parentChange, and use the data inside as a parameter Pass in
2. Pass the method to the child component <Son {…this.state} parentChange={this.parentChange.bind(this)}/>
import React, {
Component } from 'react'
import Son from './son'
export class Parent extends Component {
constructor() {
super()
this.state = {
name: '父组件',
msg: '这是父组件的信息'
}
}
// 如果要让子组件改父组件的值的话就需要定义这个函数
parentChange(data) {
console.log(data)
this.setState({
msg: data})
}
render() {
let {
name, msg } = this.state
return (
<div>
<h1>Parent Page</h1>
<h2>我是父组件的：{
msg}--{
name}</h2>
{
/* 子组件改父组件的值，就把父组件的改值事件传给子组件进行一个回调 */}
<Son {
...this.state} parentChange={
this.parentChange.bind(this)}/>
</div>
)
}
}
export default Parent
Subcomponent:
1. Bind the onChange function to the input box
2. In the handleChange function, call the method this.props.parentChange(e.target.value) passed in by the parent component, and the value passed in is the value of the input input
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
handleChange = (e) => {
this.setState({
parentMsg: e.target.value})
// 这里对父组件传过来的方法进行调用
this.props.parentChange(e.target.value)
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}</p>
<input type="text" value={
parentMsg} onChange={
this.handleChange} />
</div>
)
}
}
export default Son
pass-by-value check
What if we want to verify the type of the passed value?
The verification here is mainly to improve the readability of our code, facilitate collaborative development, and improve efficiency.
For pass-by-value verification, we need to use prop-types. After the react15 version, prop-types is another package that needs to be downloaded manually.
After the download is complete, import it directly at the top of the subcomponent page:
import PropTypes from 'prop-types'
Perform value type verification in subcomponents:
use syntax: component name.propTypes add a property, the property value is an object
Son.propTypes = {
name: PropTypes.string.isRequired, // 给isRequired属性代表必传项,不传就会报错
msg: PropTypes.string
}
// 如果需要制定默认值则像下面这样使用
Son.defaultProps = {
name: 'beiyu',
msg: '学习react'
}