React插槽

原创已于 2022-12-28 12:22:44 修改 · 433 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2022-12-28 09:16:52 首次发布

react 专栏收录该内容

5 篇文章

订阅专栏

1. 普通插槽

(1) 父组件在子组件标签中传入元素

父组件

import React, { Component } from 'react'
import Hellowrold from './Hellowrold'

export default class App extends Component {
  render() {
    return (
      <div>
        <Hellowrold>
          <h1>我是标题</h1>
          <div>我是内容</div>
        </Hellowrold>
      </div>
    )
  }
}

(2) 子组件可以在 this.props.children 中拿到所有父组件传入的元素

子组件

import React, { Component } from 'react'

export default class Hellowrold extends Component {
  componentDidMount(){
    console.log(this.props)
  }
  render() {
    return (
      <div>{this.props.children}</div>
    )
  }
}

2.具名插槽

(1) 父组件可以通过 props 属性方法向子组件传递元素

父组件

import React, { Component } from 'react'
import Hellowrold from './Hellowrold'

export default class App extends Component {
  constructor(){
    this.state = {
      title:<h1>我是标题</h1>,
      content:<div>我是内容</div>
    }
  }
  render() {
    return (
      <div>
        <Hellowrold title={this.state.title} content={this.state.content} />
      </div>
    )
  }
}

(2)子组件在this.props中可以获取父组件传来的元素

子组件

import React, { Component } from 'react'

export default class Hellowrold extends Component {
  componentDidMount(){
    console.log(this.props)
  }
  render() {
    return (
      <div>
        {this.props.title}
        {this.props.content}
      </div>
    )
  }
}