Alternative syntax for passing JSX content to props about jsx

[sophiebits]

Your eg2 is already possible in React if you write the If component cleverly.

Your eg4 example would need to change the semantics of JSX pretty drastically because currently every subexpression is eagerly evaluated and there is no way to represent this currently in JSX. I think @jimfb had a proposal somewhere (which we're unlikely to take) but I can't find it now.

[danielearwicker]

Yes, @zpao told me how a component could dig down into grandchildren. Sounds scary and wrong!

Regarding eager evaluation, that means I should correct this:

If no attributes are specified, as in eg2, then there is nothing variable for the content to depend on and hence it can just be a simple value rather than a function returning a value.

Instead, my If example should be:

const If = ({test, yes, no}) => test ? yes() : no();

i.e. yes and no are functions, and so eg2 should generate nullary functions, being equivalent to:

const eg1 = (
    <If test={allowed}
        yes={() => <button>Launch missiles</button>}
        no={() => <span>Access denied</span>} 
    />
);

i.e. what I've specified here is purely syntactic sugar, a first-pass transformation based on a pattern that can be found in element names. It would "compile down" to combinations of JSX and {(...) => ... }-bracketed chunks, with behaviour exactly as supported today, as in the above examples.

[sophiebits]

What you have is already valid syntax though (which means something different than the compilation you suggest). I don't think we're likely to support something like this in JSX itself but you should feel free to make your own syntax extension if you think it's valuable. Thanks for sending the idea!

[danielearwicker]

Ah, I see . is already supported and just passed through. : would be a possibility though.

Really I'd like to see this in TypeScript, and it's very unlikely to be adopted there unilaterally.