Add support for Class.contextType

We already support the static contextTypes and childContextTypes from the legacy
context API. React has now added contextType to the new Context API to make it
easier to consume the context value.

https://reactjs.org/docs/context.html#classcontexttype
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
This commit is contained in:
Arne Brasseur 2019-12-12 17:58:59 +01:00
parent 665b7964da
commit e6b1e9794c
3 changed files with 30 additions and 1 deletions

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## master
- Add support for the static [Class.contextType](https://reactjs.org/docs/context.html#classcontexttype) property
## 0.9.0-rc3 (2019-11-19) ## 0.9.0-rc3 (2019-11-19)
**[compare](https://github.com/reagent-project/reagent/compare/v0.9.0-rc2...v0.9.0-rc3)** **[compare](https://github.com/reagent-project/reagent/compare/v0.9.0-rc2...v0.9.0-rc3)**

View File

@ -44,6 +44,31 @@ Reagent syntax follows [React Fragment short syntax](https://reactjs.org/docs/fr
container) container)
``` ```
Alternatively you can use the [static contextType property](https://reactjs.org/docs/context.html#classcontexttype)
```cljs
(defonce my-context (react/createContext "default"))
(def Provider (.-Provider my-context))
(defn show-context []
(r/create-class
{:context-type my-context
:reagent-render (fn []
[:p (.-context (reagent.core/current-component))])}))
;; Alternatively with metadata on a form-1 component:
;;
;; (def show-context
;; ^{:context-type my-context}
;; (fn []
;; [:p (.-context (reagent.core/current-component))]))
(r/render [:> Provider {:value "bar"}
[show-context]]
container)
```
Tests contain example of using old React lifecycle Context API (`context-wrapper` function): Tests contain example of using old React lifecycle Context API (`context-wrapper` function):
[tests](https://github.com/reagent-project/reagent/blob/master/test/reagenttest/testreagent.cljs#L1141-L1165) [tests](https://github.com/reagent-project/reagent/blob/master/test/reagenttest/testreagent.cljs#L1141-L1165)

View File

@ -312,7 +312,7 @@
;; https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533#file-es6-class-cljs-L18 ;; https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533#file-es6-class-cljs-L18
(def built-in-static-method-names (def built-in-static-method-names
[:childContextTypes :contextTypes [:childContextTypes :contextTypes :contextType
:getDerivedStateFromProps :getDerivedStateFromError]) :getDerivedStateFromProps :getDerivedStateFromError])
(defn create-class (defn create-class