babel-plugin-transform-react-statements

Плагин добавляет выражения в виде React-компонентов, такие, как <For />, <If />, <Switch />.

Example

in

<div>
    <Switch value={props.current}>
        <Case value="foo">
            <If true={props.bar}>
                <div> Foo..bar </div>
            </If>
        </Case>
        
        <Case value={props.name}>
            <For each="item" in={props.items}>
                <Item key={item.id} content={item.value} />
            </For>
        </Case>
        
        <Default>
            <For in={props.defaultItems} key-is="id">
                <Item />
            </For>
        </Default>
    </Switch>
</div>

out

<div>
    {function (value, case1, case2) {
        switch (value) {
            case case1:
                return props.bar && <div> Foo..bar </div>;

            case case2:
                return <span>{Array.prototype.map.call(props.items, function (item, index) {
                    return <Item key={item.id} content={item.value} />;
                }, this)}</span>;
        }

        return <span>{Array.prototype.map.call(props.defaultItems, function (value, index) {
            return <Item key={value.id} {...value} />;
        }, this)}</span>;
    }.call(this, props.current, "foo", props.name)}
</div>;

Table of Contents

• Installation
• For
• If
• Switch
• Component

Installation

npm install --save-dev babel-plugin-transform-react-statements

For

Attributes:

• in (expression) - iterable object.
• each (string) - variable name for each items of iterable object. Not mandatory.
• counter (string) - the name of index variable. By default, index.
• key-is (string) - the name of the property that stores the unique identifier of the element. Not required.

Example:

in

<For in={props.items} key-is="id">
    <Item />
</For>

out

<span>{Array.prototype.map.call(props.items, function (value, index) {
    return <Item key={value.id} {...value} />;
}, this)}</span>;

If

Attributes:

• true/false (expression) - condition statement.

Example:

<If false={props.hidden}>
    <div> Text </div>
</If>

Switch

Attributes:

• value (expression) - condition statement.

Child components:

• <Case value={string | expression} />
• <Default />

Example:

<Switch value={props.axle}>
    <Case value="x">
        <div> X </div>
    </Case>
    
    <Case value="y">
        <div> Y </div>
    </Case>
</Switch>

Component

Attributes:

• props (string) - the name of first attribute. By default, props.

Example:

in

<Component props="item">
    <div> Item: <span>{item.name}</span> </div>
</Component>

out

item => <div> Item: <span>{item.name}</span> </div>;