Comments (2)
Good point; I would like to allow any return value from component functions, but I'm not sure about the best way to implement that.
React requires that the render method returns a single component, which is what for example [:div "foo"]
converts into. That means that a component function returning something that is not a single component (like a seq, that is converted into a javascript array, a string or a number) would have to be wrapped in some other component to keep React happy.
Wrapping string return values in a [:span ...]
would probably be the right thing to do, but what about a seq
? Should it be wrapped in a :div
or a :span
? Should a seq
of length one be replaced with its first element, if that happens to be a component? Should a seq
that happens to start with a keyword, as in your example, be converted into a vector, and thus into a single component (and, in that case, should this be allowed elsewhere as well)?
I'm also a little bit reluctant to create a solution that might become incompatible with React's way of solving the same "problem", if/when React allows other return values.
But there might be an incredibly elegant solution, that I just haven't though of…
from reagent.
Oh, i don't want to be able to return any value. The way it is now is logical and makes perfect sense. However, as several clojure functions return seqs, treating seqs and vecs equally would be a good thing. If a seq or vec starts with a keyword, treat it as a component, otherwise throw an error.
I guess, if you wanted to potentially support any return value, you could create a protocol, wrap-component or something, and then people could extend it as needed.
(defprotocol wrap-component
(wrap [self]))
(extend-protocol wrap-component
String
(wrap [self] [:span self])
Seq
(wrap [self] (vec self]))
What do you think?
from reagent.
Related Issues (20)
- Bad react key warning when using false as key
- examples/material-ui not work HOT 1
- examples/material-ui not work HOT 1
- Docs on “Changed?” inaccurate? HOT 5
- React 18 does not live reload with Shadow-CLJS in non-trivial projects HOT 5
- Prop types
- `TypeError` when using function components with `r/create-class` with `dom.server/render-to-string`
- ReactDOM.render is no longer supported in React 18. Use createRoot instead. HOT 2
- shadow-cljs emits a warning when using with-let HOT 4
- Korean input broken on :input and :textarea HOT 1
- Update docs? HOT 1
- MUI ThemeProvider not working HOT 1
- @@ -62,6 +62,45 @@ class _Config { } } // eslint-disable-next-line valid-jsdoc /** * fetch problem title, level via solved.ac api * @see {@link https://solvedac.github.io/unofficial-documentation/#/operations/getProblemByIdArray} * @param {string[]} pids - list of problem id (up to 100) * @param { ({ problemId, titleKo, level }) => void } callback */ function fetchProblemsFromSolvedAc(pids, callback) { const query = encodeURIComponent(pids.join(',')); console.log(`https://solved.ac/api/v3/problem/lookup?problemIds=${query}`); fetch(`https://solved.ac/api/v3/problem/lookup?problemIds=${query}`) .then((res) => { console.log('fetchProblemsFromSolvedAc', res); return res; }) .then((res) => res.json()) .then(callback) .catch(() => callback(null)); }
- Readme says npm i or add deps to .edn but (in my case at least) needed both HOT 1
- Any interest in being able to replace `react/createElement` with a custom function? HOT 7
- The cursor disappears at the end of a controlled input on Chrome
- Reusable components following HTML semantics of Opional Attributes and Variadic Children HOT 3
- Controlled input loses cursor under ShadowRoot in React 18 HOT 3
- snake_case mentioned instead kebab-case in documentation of create-class function.
- Class name composition is harder than it needs to be
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reagent.