Directorio de artículos
componente padre-hijo paso por valor
En reaccionar, el método de props se puede usar para padre a hijo, y la función de devolución de llamada de props se usa para
componente padre de hijo a padre:
defina el estado en el componente padre y pase este objeto de estado al hijo componente, por lo que puede escribir directamente {... 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
Componente
secundario: escriba parentMsg: props.msg en el estado, de modo que parentMsg se pueda mostrar directamente en la página, es decir, el valor pasado por el componente principal
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
Problema de duplicación de componentes padre-hijo resuelto
El componente padre tiene nombre, msg, y el componente hijo también tiene el nombre de la variable ¿Cómo hacerlo si se quiere usar en conjunto?
En el subcomponente, el estado es propio y los accesorios se pasan desde el exterior, por lo que podemos crear un alias de las variables en los accesorios:
si no queremos usar un alias, también podemos usar this.state.name directamente, 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
El componente hijo cambia el valor del componente padre
Definimos un cuadro de entrada en el componente secundario y esperamos cambiar el valor que muestra el componente principal a través de este cuadro de entrada:
idea : escriba el método en el componente principal y llámelo en el componente secundario Componente principal
:
1. Defina la función parentChange, y use los datos dentro como un parámetro Pass in
2. Pase el método al componente hijo <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
Subcomponente:
1. Vincule la función onChange al cuadro de entrada
2. En la función handleChange, llame al método this.props.parentChange(e.target.value) pasado por el componente principal, y el valor pasado es el valor de la entrada de entrada
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
comprobación de paso por valor
¿Qué pasa si queremos verificar el tipo del valor pasado?
La verificación aquí es principalmente para mejorar la legibilidad de nuestro código, facilitar el desarrollo colaborativo y mejorar la eficiencia.
Para la verificación de paso por valor, necesitamos usar prop-types Después de la versión de react15, prop-types es otro paquete que debe descargarse manualmente.
Una vez completada la descarga, impórtelo directamente en la parte superior de la página del subcomponente:
import PropTypes from 'prop-types'
Realice la verificación del tipo de valor en los subcomponentes:
use la sintaxis: nombre del componente.propTypes agregue una propiedad, el valor de la propiedad es un objeto
Son.propTypes = {
name: PropTypes.string.isRequired, // 给isRequired属性代表必传项,不传就会报错
msg: PropTypes.string
}
// 如果需要制定默认值则像下面这样使用
Son.defaultProps = {
name: 'beiyu',
msg: '学习react'
}