4 ms·
It's the extreme fanboyism there! Wrapping every component that has `if` attribute with an `if` statement should not result into that: <div *if={cond1 && c
by msoad 10y ago
It's the extreme fanboyism there! Wrapping every component that has `if` attribute with an `if` statement should not result into that:
<div *if={cond1 && cond2}>
<div>foo</div>
</div>
// results to
if (cond1 && cond2) {
return React.createElement('div', null,
React.createElement('div', null, 'foo')
);
}
I'm not sure why this is bad? Because it's looking like Angular?!!
- cel1ne 10y agoI think ternary expression are rather ok here, though not perfect: {cond1 && cond2 ? <div>foo</div> : null }
- danneu 10y agoAnd you can inline if-statements with an IIFE when you need a little more space: {(() => { if (cond1 && cond2) return <div>foo</div> else ... })()} Though it makes GitHub think it's a Clojure file.
- vanderZwan 10y ago{(() => { })()} Honestly I can't decide if I think this is ugly or beautiful. It's like the buffalo buffalo of JS.
- olalonde 10y agoThat's something the "do expressions" ECMAScript proposal is meant to solve: {do { if (cond1 && cond2) <div>foo</div> else ... }} If JSX decides to implement "implicit" "do expressions", I suppose it would just look like this: { if (cond1 && cond2) <div>foo</div> else ... } http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions http://wiki.ecmascript.org/doku.php?id=strawman:do_expressio...
- deleted 10y ago[deleted]
- spirit23 10y agoIt’s interesting to see that there are so many ways of doing conditions in JSX. I myself wrote a tiny library (http://github.com/yuanchuan/cond http://github.com/yuanchuan/cond) for it several months ago and thought it made the code looks clean but suffers the same undefined issue though.
- coderzach 10y agoIt's bad because it's inconsistent with how every other attribute in jsx works. Nothing else in jsx changes the control flow of the code.
- Yaggo 10y ago<div if={expression} /> translates to React.createElement('div', {if: <expression>}) This is bad because createElement always gets execute, whether the if expression evaluated to true or false. Changing this semantic would be messy.
- _betty_ 10y agoI'd love for them to adopt something similar to Razor (Microsoft server side html engine) note: i've changed your example to show code inside html tags, i'm aware it does something different to yours. conditionals <div> @if(cond1 && cond2) { <div>foo</div> } </div> loops <div> @for(var i in collection) { <div></div> } </div> variables <div> @variable </div> ternary/longer statement <div> @(variable ? 1 : 2) </div>
- tmzt 10y agoThe one negative thing I've found with Razor is the ambiguous start and end of statements or expressions vs html. Sometimes a @ is required before a statement and sometimes its a syntax error, conversely statements and and expressions may be rendered as text if they follow html with a @. I think jsx's approach is clearer.
- _betty_ 10y agoadmittedly there is the occasional moment I hit where I need an extra @ or @: so it's not perfect, but I have much less issue reading that format than the { true && <element /> } syntax, also think @if is a lot nicer than <if>. Maybe just a personal thing.