React JSX syntax simply supports if judgment

1. Start with JSX

• JSX is the official recommendation, but it’s essentially just a syntactic sugar
• JSX isn’t the only option in React development
• JSX will eventually compile and parse, via react.createElementFacebook. Making. IO/react/docs /…

  Render () {return (<div> <div>); render(<div> </div>); } } ReactDom.render(<App />, document.getElementById('app')); Ponent {render() {return (react. createElement('div', null, React.createElement('div', null, 'save unhappy ')); } } ReactDom.render(<App />, document.getElementById('app'));Copy the code

2.JSX does not support logical judgment

Class App extend React.Component {render() {return (<div> {if (bool) {<div> <div/>}} </div>);  }}Copy the code

3. Use closure features to simply support if judgment

• Paste code directly

  // If.js--ES5
  exports.If = function (bool) {
      return function (jsx) {
          return bool ? jsx : null;
      };
  };
  //If.js--ES6
  export default option => bool => bool ? jsx : null;Copy the code

Render () {return (<div> {If (list.length === 0) (<div> </div>)} </div> ); }}Copy the code

• Notice that the code block is wrapped in (), not {}, because it returns a function that needs to be called again
• bool ? JSX: NULL This is where the unit expression finally determines what is returned

4. Some people may ask, the above judgment directly write ternary expression JSX is not also support it