React基础知识及示例（三）

最新推荐文章于 2024-06-04 17:04:15 发布

自带代码增幅

最新推荐文章于 2024-06-04 17:04:15 发布

阅读量145

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/Meuan/article/details/105021467

版权

React组件嵌套

react的嵌套不像vue那样会有全局和局部之分

react的嵌套关系就是谁在外边谁就是父组件（爸爸组件）

结合例子：

<body>
  <div id="app">

  </div>
<script type="text/babel">
let Component = React.createClass({
  render(){
    return(
      <div className='test1'> 
        这是组件1
  
      </div>
    )
  }
})

//创建组件二
let Son = React.createClass({
  render(){
    return (
      <div className='test2'>
        这里是组件二
        <Component></Component>
      </div>
    )
  }
})

ReactDOM.render(<Son/>,document.getElementById('app'))
</script>
</body>

slot插槽

和vue中一样

组件标签中存放的内容默认不会被渲染而且react中没有slot

组件对象下 props.children可以用来获取组件标签中的内容

举例：

<script type="text/babel">
let Component = React.createClass({
  render(){
    return(
      <div className='test1'> 
        这是组件1
        <Son>
          BIGBANG---《BANG BANG BANG》
        </Son>
      </div>
    )
  }
})

//创建组件二
let Son = React.createClass({
  render(){
    console.log(this)
    return (
      <div className='test2'>
        这里是组件二
        <h1>{this.props.children}</h1>
      </div>
    )
  }
})

ReactDOM.render(<Component/>,document.getElementById('app'))
</script>

ref

可以绑定dom 也可以绑定组件
通过组件对象下的 refs进行获取

第一种方法，通过ref绑定dom

结合例子：

<body>
  <div id="app">

  </div>
<script type="text/babel">
let Component = React.createClass({
  render(){
    return(
      <div className='test1'> 
        这是组件1
        <Son>
          
        </Son>
      </div>
    )
  }
})

//创建组件二
let Son = React.createClass({
  render(){
    return (
      <div className='test2'>
        这里是组件二
        <h1 ref='hehe'>不经历风雨，怎能见彩虹</h1>
        <button onClick={()=>{
          console.log(this.refs.hehe)
        }}>点击</button>
      </div>
    )
  }
})
/*
ref 可以用来绑定元素 
通过组件对象下的 this.refs 进行获取
*/ 
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
</body>

第二种方法，通过ref绑定component

结合例子：

<body>
  <div id="app">

  </div>
<script type="text/babel">
let Component = React.createClass({
  render(){
    return(
      <div className='test1'> 
        这是组件1
        <button onClick={()=>{
          console.log(this)
          this.refs.son.sayHello()
        }}>点击</button>
        <hr/>
        <Son ref='son'></Son>
      </div>
    )
  }
})

//创建组件二
let Son = React.createClass({
  sayHello(){
    alert('你好')
  },
  render(){
    return (
      <div className='test2'>
        这里是组件二
      </div>
    )
  }
})
/*
ref除了可以绑定dom之外 还可以绑定组件 
绑定之后可以获取到绑定组件的一切  方法
可以实现在父组件中调用子组件的方法
*/ 
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
</body>

react组件通信

父子通信 props refs
子父通信 props
亲兄弟通信状态提升
远亲通信全局状态管理 redux

自带代码增幅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础知识及示例（三）

React组件嵌套react的嵌套不像vue那样会有全局和局部之分react的嵌套关系就是谁在外边谁就是父组件（爸爸组件）结合例子：<body> <div id="app"> </div><script type="text/babel">let Component = React.createClass({ render(...
复制链接

扫一扫