Skip to content

implement a generic solution for setting a react key on a component from outside the component. #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shyblower wants to merge 3 commits into
base: master
Choose a base branch
from
Open

implement a generic solution for setting a react key on a component from outside the component. #59

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8be155f
implement a generic solution for setting a react key on a component f…
shyblower May 27, 2016
fcc20d6
improve 'with-key' technique by using a deftype instead of metadata t…
shyblower Aug 12, 2016
8f82c43
fix property name
shyblower Aug 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions src/quiescent/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@
[method (impl-ctor impl)]))))
opts-map)))

(deftype ValueWithKey [value react-key])

(defn with-key [value react-key]
(ValueWithKey. value react-key))

(defn component
"Return a factory function that will create a ReactElement, using the provided function as the
'render' method for a ReactJS component, which is created and instantiated behind-the-scenes.
Expand All @@ -72,6 +77,11 @@
:keyfn - a single-argument function which is invoked at component construction time. It is
passed the component's value, and returns the ReactJS key used to uniquely identify this
component among its children.
The key may also be set by applying a key to the value at call time using the with-key
function, e.g. (MyComponent (with-key value key) ...), which will override :keyfn.
This has the advantage that neither every component that may be part of a sequence has to
implement a :keyfn function nor does the component have to know that fact and how to generate
a key which will not be needed by the component for any other purpose.

:name - the name of the element, used for debugging purposes.

Expand Down Expand Up @@ -135,11 +145,13 @@
(build-lifecycle-impls opts))
react-component (.createClass js/React (clj->js impl))]
(fn [value & constant-args]
(let [props (js-obj)]
(set! (.-value props) value)
(let [props (js-obj)
[real-value react-key] (if (instance? ValueWithKey value)
[(.-value value) (.-react-key value)]
[value (when-let [keyfn (:keyfn opts)] (keyfn value))])]
(set! (.-value props) real-value)
(set! (.-constants props) constant-args)
(when-let [keyfn (:keyfn opts)]
(set! (.-key props) (keyfn value)))
(when react-key (set! (.-key props) react-key))
(.createElement js/React react-component props))))))

(defn unmount
Expand Down