Comments (13)
To follow up. This is still an open issue, but not very high priority until do expressions are further along the standardization track and its semantics clarified.
from jsx.
@syranide I'm not sure it is obviously so. Would you care to elaborate? Do you mean fat-arrows with the block or single expression? Regardless, fat-arrows don't do this.
I think the rationale may be different since it is a late executing block. For example, control flow like return
, break
, continue
... behaves very differently in these cases.
They're also standardized in different order so this could be a process artifact rather than technical rationale.
from jsx.
What does {x:1}
mean in a do expression body? Is it a block with a label or an object literal? If it's a block, it is unfortunate that {{ }}
wouldn't work to create an object. You would have to use {({ })}
.
from jsx.
{foo && <bar foo={foo} />}
is buggy, if foo is undefined
then React will warn.
You need {foo && <bar foo={foo} /> || null}
in which case you might as well use ternary:
{foo ? <bar foo={foo} /> : null}
from jsx.
ref https://github.com/rwaldron/tc39-notes/blob/master/es6/2014-01/jan-29.md#do-expression
from jsx.
I can implement this in Babel with literally a few lines so 👍 from me. Also see reactjs/react-future#35 which is the exact issue that prompted that tweet and discussion 😄
from jsx.
@sebmck My tweet inspired by your comment 😄
from jsx.
Haha, circle has closed :) (I didn't see the original discussion; sorry @sebmck)
from jsx.
My main objection would be that if this makes sense... then it should make sense for fat-arrow functions as well, if they choose not to have it JSX probably shouldn't either.
from jsx.
@sebmarkbage Huh, you're right. Everything inside of the do
expression, incl. {x:1}
is a block. Might be a serious issue for us.
from jsx.
@sebmarkbage @RReverser That's how arrow functions work too. PS. And having object children seems like something that is rarely useful.
from jsx.
@syranide I still fail to see why you compare arrow functions to do expressions. They were designed as functions after all, so they had to be able to provide code blocks that don't return any values but behave pretty much as regular functions/blocks. Do expressions are different in the sense that their entire point is exactly to implicitly return last value. Arrow functions don't need to adopt this implicit behavior by default, but do expressions complement them in the sense that you can do x => do { ... }
when it's needed.
from jsx.
This seems like a good idea at first glance but I'm concerned it encourages spaghetti code.
I can't think of a use case that couldn't already be implemented in a better way, predominantly through encapsulation. In simple cases bool expressions are fine (the classic {foo && <bar foo={foo} />}
), in more complicated cases encapsulation provides cleaner code and better reusability (for better or worse).
Taking the example from the linked tweet in the original post, we can tidy it up through encapsulation as:
function UserMenuItem(props) {
return props.user ? <UserInfo user={user} /> : <LoginForm />;
}
class Menu {
render() {
return <div>
<h2>Menu</h2>
<UserMenuItem user={this.props.user} />
</div>;
}
}
We could go a step further and make Menu itself a function-style component, further simplifying the code.
from jsx.
Related Issues (20)
- Add early error to disallow invalid adjacent JSX elements HOT 3
- can you provide a syntactic sugar? HOT 3
- Can we move JSX to be an extension of ES Spec that evolves forward like EcmaScript + TC39 ? HOT 3
- RFC: An evolved JSX 2.0 proposal HOT 1
- Get accessor in props HOT 1
- HTML and JSX spec HOT 1
- The syntax in website is missing JSXFragment as JSXChild
- Proposal: ability to return multiple chlidren by auto-wraping them into a Fragment HOT 2
- Proposal: using ! prefix on attributes to set them to `false`
- Ambiguous syntax HOT 2
- Spec out whitespacing / line break behaviors HOT 4
- Split Out Lexical Grammar
- Behavior of `�` and lone surrogates unicode entities HOT 2
- Proposal: Attributes with the same name as their value HOT 1
- Proposal: Syntactic sugar for props with same name as value passed HOT 1
- Distinguish tags from elements in the terminology
- Feature request: nameless closing tags
- Proposal: faster way to id and classes HOT 7
- Proposal: combining classes using only className HOT 2
- In this specification there is a reference to Babylon, now @babel-parser
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 jsx.