惠东县网站建设,上海市工程咨询行业协会,南京网站开发培训,做网站需提供什么资料react renderProps学习记录1.引入2.改一下呢3.再改一下呢4.总结一下如何向组件内部动态传入带内容的结构(标签)?children propsrender props1.引入
上代码#xff1a;
import React, { Component } from react
import ./index.css
export default class Parent extends Com…
react renderProps学习记录1.引入2.改一下呢3.再改一下呢4.总结一下如何向组件内部动态传入带内容的结构(标签)?children propsrender props1.引入
上代码
import React, { Component } from react
import ./index.css
export default class Parent extends Component {render() {return (div classNameparenth3我是Parent组件/h3A//div)}
}class A extends Component {render() {console.log(this.props);return (div classNameah3我是A组件/h3/div)}
}结果很简单就能猜到 改一下呢
import React, { Component } from react
import ./index.css
export default class Parent extends Component {render() {return (div classNameparenth3我是Parent组件/h3AHello !/A/div)}
}class A extends Component {render() {console.log(this.props);return (div classNameah3我是A组件/h3/div)}
}页面是没有现实Hello !的但是之前一次的封装NaLink也有传递过标签体内容的在子组件的props中children:(内容) 所以A组件想要展示传递的标签体内容的话还要改一下A组件
class A extends Component {render() {console.log(this.props);return (div classNameah3我是A组件/h3{this.props.children}/div)}
}2.改一下呢
import React, { Component } from react
import ./index.css
export default class Parent extends Component {render() {return (div classNameparenth3我是Parent组件/h3AB//A/div)}
}class A extends Component {state { name:Mike}render() {console.log(this.props);return (div classNameah3我是A组件/h3{this.props.children}/div)}
}class B extends Component {render() {console.log(B--render);return (div classNamebh3我是B组件/h3/div)}
}
A,B组件成了父子组件 但是这样如果A组件想传自己的值给B组件貌似是行不通的
3.再改一下呢
import React, { Component } from react
import ./index.css
import C from ../1_setStateexport default class Parent extends Component {render() {return (div classNameparenth3我是Parent组件/h3A render{(name) B name{name}/} //div)}
}class A extends Component {state { name:Mike}render() {const {name} this.state;console.log(this.props);return (div classNameah3我是A组件/h3{this.props.render(name)}/div)}
}class B extends Component {render() {console.log(B--render);return (div classNamebh3我是B组件,接收到的name:{this.props.name}/h3/div)}
}
主要是Parent组件和A组件之间调用要注意 Parent组件中render当然可以去其他的名字这里这样写相当于预留了一个插槽如果你需要渲染其他组件例如例子中的B组件在A组件中调用this.props.render()就可以渲染出B组件不写的话就不会渲染出B组件
4.总结一下
如何向组件内部动态传入带内容的结构(标签)? Vue中: 使用slot技术, 也就是通过组件标签体传入结构 React中: 使用children props: 通过组件标签体传入结构 使用render props: 通过组件标签属性传入结构, 一般用render函数属性 children props
ABxxxx/B
/A
{this.props.children}
问题: 如果B组件需要A组件内的数据, 做不到 render props
A render{(data) C data{data}/C}/A
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
