Skip to content
Learn Vue.js and implement Slot based on Web Components draft specification.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts
src
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

React Slot Element

license Build Status

Learn Vue.js and implement Slot based on Web Components draft specification.

Install

yarn add react-slot-element

Quick Start

单个插槽

父组件模板:

import React from 'react'
import Slot from 'react-slot-element'

class Parent extends React.Component {
  render () {
    return (<div>
      <h2>我是子组件的标题</h2>
      <Slot>
        只有在没有要分发的内容时才会显示。
      </Slot>
    </div>)
  }
}

export default Slot.with(Parent)

插槽内容:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>
    <h1>我是父组件的标题</h1>
    <Parent>
      <p>这是一些初始内容</p>
      <p>这是更多的初始内容</p>
    </Parent>
  </div>,
  document.getElementById('root')
)

渲染结果:

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

具名插槽

父组件模板:

import React from 'react'
import Slot from 'react-slot-element'

class Parent extends React.Component {
  render () {
    return (<div className="container">
      <header>
        <Parent name="header"></Parent>
      </header>
      <main>
        <Parent></Parent>
      </main>
      <footer>
        <Parent name="footer"></Parent>
      </footer>
    </div>)
  }
}

export default Slot.with(Parent)

插槽内容:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Parent>
    <h1 slot="header">这里可能是一个页面标题</h1>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
    <p slot="footer">这里有一些联系信息</p>
  </Parent>,
  document.getElementById('root')
)

渲染结果:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>
You can’t perform that action at this time.