文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React传递参数的几种方式

2024-04-02 19:55

关注

父子组件之间传递参数

父组件往子组件传值,直接用this.props就可以实现

在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传递过去的数据


// 父组件
 render() {
        return (
                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>
            )
    } 

//子组件 
//通过this.props.toson就可以获取到父组件传递过来的数据 

如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了


tograndson={this.props.toson}

孙组件通过this.props.tograndson获取到数据

子组件给父组件传值的话,需要在父组件设置接收函数和state,同时将函数名通过props传递给子组件

也就是给子组件传入父组件的方法,在子组件进行调用


//孙子组件
export default class Grandson extends Component{
    render(){
        return (
            <div style={{border: "1px solid red",margin: "10px"}}>
        {this.props.name}:
                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        )
    }
};
 
//子组件
export default class Child extends Component{
    render(){
        return (
            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}:<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>
        )
    }
};
 
//父组件
export default class Parent extends Component{
 
    constructor(props){
        super(props)
        this.state={
            username: '',
            sex: ''
        }   
    },
    handleVal(event){
        this.setState({username: event.target.value});
    },
    handleSelect(value) {
        this.setState({sex: event.target.value});
    },
    render(){
        return (
            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名:{this.state.username}</div>
                <div>用户性别:{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
}

前一段时间有人问过我这样一个问题,constructor里面的super()是干嘛用的?

总结一下:

  如果要在子类的constructor里使用this,必须调用父类constructor,否则就拿不到this

  那么问题就来了,如何调用父类的constructor呢? 通过super()

  如果要在constructor里使用父组件传递过来的参数,必须在调用父组件super时,传递参数给父组件的constructor

  如果不在constructor里面使用this,或者参数,就不需要super ; 因为React以及帮你做了this,props的绑定

路由传参

  安装 npm install react-router-dom --save-dev

  定义路由(一般会放在外面)


 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter> 

当页面跳转时


<li  onClick={el => this.props.history.push({
   pathname:'/detail',
      state:{id:3}
})}
>
</li>

接收    通过this.props.history.location可以获取到传递过来的数据

路由传参可能会有这个问题,就是只有在路由定义时挂载的组件中才会有props里面的location history match

路由上挂载的那个组件一般都是Container.js,一般我们会往下分出UI.js组件,在这里面进行点击跳转,UI组件props里没有location history match

需要用到高阶组件withRouter

 状态提升

  将多个组件需要共享的状态提升到离他们最近的那个公共父组件上,然后父组件通过props分发给子组件

context

  当某个组件在自己的context中保存了某个状态,那个该组件下的所有子孙组件都可以访问到这个状态,不需要中间组件的传递,而这个组件的父组件是没办法访问的


class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}

通过getChildContext()将属性传递给所有的子孙组件
提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。 


class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}></h1>
    )
  }
}

子组件要获取 context 里面的内容的话,就必须写 contextTypes 来声明和验证你需要获取的状态的类型,它也是必写的,如果你不写就无法获取 context 里面的状态。
Title 想获取 themeColor,它是一个字符串,我们就在 contextTypes 里面进行声明。

引入redux

  redux为React提供可预测化的状态管理机制

  redux将整个应用状态存储到store,store里保存着一个state状态树

  组件可以派发(dispatch)  行为 (action)  给store , 而不是直接通知其它组件

  其它组件可以通过订阅store中的状态state来刷新自己的视图

到此这篇关于React传递参数的几种方式的文章就介绍到这了,更多相关React传递参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯