Learn Vue.js and implement Slot based on Web Components draft specification.
yarn add react-slot-element
父组件模板:
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>