5 ms·

Yeah, it's possible in React do to it. But compare that to how Vue handles conditionals: <template> <div> <h2>HELLO</h2> <p>Duis a turp

• insin 10y ago
  This is how I've come to write that in React, after giving up on attempting to find a consistent way to write ternaries which I would find acceptable when revisiting them (it just never happened): let Home = ({location}) => <div> <h2>HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> {!location.query.home && <p>No home query was specified.</p>} {location.query.home && <p>You specified a home query: {location.query.home}</p>} </div> I usually put all the possible negative cases first because outside of micro-snippets they tend to be short and sweet compared to the positive condition.
  • bestest 10y ago
    Come on people. It's so much simpler: return ( <div> <h2>hello</h2> { location.query.home ? <div>foo</div> : <div>bar</div> } </div> ) Or just replace that with a one-liner like, and put the respective code where it belongs: {location.query.home ? this.renderHomeStuff() : this.renderEtcStuff()} And simple ifs are obvious: <div> <h2>hey</h2> {foo && <div>foobar</div>} </div> Always strive to make your render methods simpler.
• straye 10y ago
  It's strange to me to embed conditions in attributes - particularly the v-else case in a different tag. It requires several visual scans of the block of code to determine what's going on. In my opinion the following requires less cognitive overhead: function Home(props) { var query = props.location.query.home ? ( <p>You specified a home query: { props.location.query.home }</p> ) : ( <p>No home query was specified.</p> ); return ( <div> <h2>HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> {query} </div> ); }
  • straye 10y ago
    This also works: function Home(props) { return ( <div> <h2>HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> { props.location.query.home ? ( <p>You specified a home query: { props.location.query.home }</p> ) : ( <p>No home query was specified.</p> ) } </div> ); }
• hokkos 10y ago
  Mixing tag and conditionals in attributes is so messy, I don't know how people accept that. It messes with the level of the scope, you can't quickly see that only one of the <p> will be outputted.
• unsoundInput 10y ago
  What bothers me about this and other templating is that branching is so inconspicuous and therefore hides its complexity . Lets takes this extended example: <template> <div> <h2 class="c-section-heading">HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> <p v-if="location.query.home">You specified a home query: {{location.query.home}}</p> <a v-else v-on:click="specifyHomeQuery" class="u-warn">No home query was specified</a> </div> </template> And compare it to: <template> <div> <h2 class="c-section-heading">HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> <p>You specified a home query: {{location.query.home}}</p> <a v-on:click="specifyHomeQuery" class="u-warn">No home query was specified</a> </div> </template> The first one creates a div with 3 children with the type of the last one depending on the condition. The second one creates a div with 4 children (and a warning in the dev console). Both have 4 lines between the <div> with the same content except for two attributes on two elements and are indented the same by convention of the framework. They look nearly identical when quickly parsing over them but results are very different. Compare this to the other react solutions, or my personal favorite: const Home = ({location}) => <div> <h2 className="c-section-heading">HELLO</h2> <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> {location.query.home ? <p>You specified a home query: {location.query.home}</p> : <a onClick={specifyHomeQuery} className="u-warn">No home query was specified.</a>} </div> I think it's pretty clear which "templating system" better represents the fact that this has more complexity than just a simple, linear component.