If-Else in JSX Back

In React, if-else is not work inside JSX.

ReactDOM.render(
    <div id={if (condition) { 'msg' } }></div>,
    document.getElementById('content')
)

If we code a JSX like the below one, you will find that the converted JavaScript will have something wrong.

ReactDOM.render(
    React.createElement('div', { id: condition ?  'msg' : null }),
    document.getElementById('content')
)

A ternary expression (三角表達式) will be a good choice to solve this problem:

ReactDOM.render(
    <div id={condition ? 'msg' : null}></div>,
    document.getElementById('content')
)

If we code a JSX like the below one, you will find that the converted JavaScript will have something wrong.

ReactDOM.render(
    React.createElement('div', { id: condition ? 'msg' : null }),
    document.getElementById('content')
)

Nevertheless, if a ternary expression still cannot fit your case, you can use if-else like this:

var divElem;

if (condition) {
    divElem = <div id="msg"></div>;
} else {
    divElem = <div></div>;
}

ReactDOM.render(
    divElem,
    document.getElementById('content')
)

Prefer to more "inline" aesthetic (美感)? Try to use arrow function of ES6.

ReactDOM.render(
    <div id={
        (() => {
            switch (condition) {
                case true:
                    return 'msg';
                default:
                    return null;
            }
        })();
    }></div>,
    document.getElementById('content')
)

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize