資訊專欄INFORMATION COLUMN
摘要：首先來看下的的實現組件，具名插槽定義以及默認插槽提供內容渲染的組件最終會渲染出已下架結構言歸正傳，怎樣使用的實現的這一功能呢首先確認下組件的結構對此結構輸出具體內容的組件這里可能是一個頁面標題主要內容的一個段落。
首先來看下vue的slot的實現
提供內容渲染的組件
Here might be a page title
A paragraph for the main content.
And another one.
Here"s some contact info
最終會渲染出已下架結構
言歸正傳，怎樣使用react的context實現vue的這一功能呢 1 首先確認下layout組件的結構Here might be a page title
A paragraph for the main content.
And another one.
import React, { Component } from "react";
import SlotProvider from "./SlotProvider"
import Slot from "./Slot"
class AppLayout extends Component {
static displayName = "AppLayout"
render () {
return (
)
}
}
export default SlotProvider(AppLayout)
2 對此結構輸出具體內容的組件
import React, { Component } from "react";
import AppLayout from "./AppLayout"
import AddOn from "./AddOn"
export default class App extends Component {
render() {
return (
這里可能是一個頁面標題
主要內容的一個段落。
另一個段落。
這里有一些聯系信息
)
}
}
3 其中AddOn類似于上面vue的template，所以下面來實現這個簡單的只是用來提供slot標識和children內容的組件AddOn的實現
import React from "react";
import PropTypes from "prop-types"
const AddOn = () => null
AddOn.propTypes = { slot: PropTypes.string }
AddOn.defaultTypes = { slot: "$$default" }
AddOn.displayName = "AddOn"
export default AddOn
4 Slot組件
import React from "react";
import { SlotContext } from "./SlotProvider"
import PropTypes from "prop-types"
const Slot = ({ name, children }) => {
return (
{(value) => {
const addOnRenderer = value.requestAddOnRenderer(name)
return (addOnRenderer && addOnRenderer()) || children || null
}}
)
}
Slot.displayName = "Slot"
Slot.propTypes = { name: PropTypes.string }
Slot.defaultProps = { name: "$$default" }
export default Slot
5 接下來就是對Slot進行解析的HOC SlotProvider組件了
import React, { Component } from "react";
function getDisplayName(component) {
return component.displayName || component.name || "component"
}
export const SlotContext = React.createContext({
requestAddOnRenderer: () => { }
})
const SlotProviderHoC = (WrappedComponent) => {
return class extends Component {
static displayName = `SlotProvider(${getDisplayName(WrappedComponent)})`
// 用于緩存每個
)
}
}
}
export default SlotProviderHoC
6 最終渲染結果
摘抄：張國鈺
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54208.html
摘要：首先來看下的的實現組件，具名插槽定義以及默認插槽提供內容渲染的組件最終會渲染出已下架結構言歸正傳，怎樣使用的實現的這一功能呢首先確認下組件的結構對此結構輸出具體內容的組件這里可能是一個頁面標題主要內容的一個段落。 首先來看下vue的slot的實現 組件，具名插槽name定義以及默認插槽 提供內容渲染的組件 ...
摘要：案例持續觸發事件時，并不立即執行函數，當毫秒內沒有觸發事件時，才會延時觸發一次函數。也以函數形式暴露普通插槽。這樣的場景組件用函數式組件是非常方便的。相關閱讀函數式組件自定義指令前言 有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts...
摘要：假如以的作用域鏈作為類比，組件提供的對象其實就好比一個提供給子組件訪問的作用域，而對象的屬性可以看成作用域上的活動對象。所以，我借鑒了作用域鏈的思路，把當成是組件的作用域來使用。 前言 Context被翻譯為上下文，在編程領域，這是一個經常會接觸到的概念，React中也有。 在React的官方文檔中，Context被歸類為高級部分(Advanced)，屬于React的高級API，但官方...
摘要：結合我們的例子，子組件則會生成以下代碼到目前為止，對于普通插槽和作用域插槽已經談的差不多了。下面我們將仔細談談這塊的內容。在看具體實現邏輯前，我們先通過一個例子來先了解下其基本用法然后進行使用頁面展示效果如下看著好。本篇文章是細談 vue 系列第二篇了，上篇我們已經細談了 vue 的核心之一 vdom，傳送門 今天我們將分析我們經常使用的 vue 功能 slot 是如何設計和實現的，本文將圍...
閱讀 2621·2021-11-25 09:43
閱讀 2725·2021-11-04 16:09
閱讀 1634·2021-10-12 10:13
閱讀 881·2021-09-29 09:35
閱讀 880·2021-08-03 14:03
閱讀 1777·2019-08-30 15:55
閱讀 2989·2019-08-28 18:14
閱讀 3489·2019-08-26 13:43
