React组件传值方式总结
2024-08-31 03:39:55
1. 子组件向父组件传值
父组件Header:
import Nav from 'Nav.js';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
}
this.callbackForNav = this.callbackForNav.bind(this);
}
callbackForNav({ selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName }) {
this.setState({
selectedTopChannelOrder,
selectedSubChannelOrder,
selectedTopChannelName,
selectedSubChannelName
})
}
render() {
return (<Nav channels={navChannelData} dynamicnav={dynamicNav} defaultSelectedTopChannelOrder={navDefaultTopOrder} defaultSelectedSubChannelOrder={navDefaultSubOrder} callbackFunc={this.callbackForNav} sticky="top" />)
}
}
子组件Nav:
class Nav extends React.Component {
constructor() {
this.state = {
selectedTopChannelOrder:0,
selectedSubChannelOrder:-1,
selectedTopChannelName: "",
selectedSubChannelName:""
}
}
static propTypes = {
callbackFunc: PropTypes.func
}
componentDidMount() {
const {selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName} = this.state;
this.props.callbackFunc({selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName})
}
clickSubChannel() {
this.setState({
selectedTopChannelOrder: topOrder,
selectedTopChannelName: topName,
selectedSubChannelOrder: subOrder,
selectedSubChannelName: subName
});
this.props.callbackFunc({
selectedTopChannelOrder: topOrder,
selectedTopChannelName: topName,
selectedSubChannelOrder: subOrder,
selectedSubChannelName: subName
});
}
render() {
return (...)
}
}
2. 跨级组件传值
利用context
父组件:
class List extends React.Component {
static childContextType = {
color:PropTypes.string
}
getChildContext() {
return {
color:'red'
}
}
render() {
return (...)
}
}
子组件:
class ListItem extends React.Component {
static contextTypes = {
color:PropTypes.string
}
render(){
return (
<li style={{background:this.context.color}}>someword</li>
)
}
}
3. 无嵌套关系的组件传值
import {EventEmitter} from 'events';
const emitter = new EventEitter();
class A extends React.Component {
clickHandler(data,e) {
this.setState({
...
});
emitter.emit('theclick', data);
}
render() {
const data = 'xxx';
return (<div onClick={this.clickHandler.bind(this, data)} />)
}
}
App containing A and B:
import {EventEmitter} from 'events';
const emitter = new EventEitter();
class App extends React.Component {
componentDidMount() {
this.listenerForTheClick = emitter.on('theclick', (data) => {
this.setState({
propForB: data;
})
})
}
componentWillUnmount() {
emitter.remove(this.listenerForTheClick);
}
render() {
return (
<B someprop={this.state.propForB} />
<A />
)
}
}
最新文章
- php 使用函数中遇到的坑之----list
- 夺命雷公狗-----React---4--props变量的传递
- Duilib 鼠标在某控件例如按钮上悬停后，对目标控件操作
- ubuntu开机遇到-您的当前网络有.local域，我们不建议这样做而且这与AVAHI网络服务探测不兼容。该服务已被禁用
- UITableView局部刷新
- VS2010 删除空行
- C#制作在线升级程序
- ionic安装
- null类型的字段加1
- Tair LDB基于Prefixkey找到如何提取一系列性能优化项目key的prefix_size
- Hook SSDT中NtCreateProcessEx
- sparksql工程小记
- java基础学习系列三
- 火狐浏览器中如何删除保存的cookie
- SLAM+语音机器人DIY系列：（二）ROS入门——9.熟练使用rviz
- redis的线程模型是什么？
- 运行Maven项目时出现invalid LOC header (bad signature)错误，Tomcat不能正常启动
- FTP登录不上 显示“找不到元素”
- GC 垃圾收集
- Linux stress CPU的测试方法