Vue 和 React 语法对比 & polyfill

1. class 类名+布尔值

// vue
<div v-bind:class="{ active: isActive }"></div>
//react + classnames  [https://www.jianshu.com/p/9cf57787360d]
render(){
  var btnClass = classNames({
      'btn': true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
  return <button className={btnClass}>{this.props.label}</button>;
}

2. css 样式作用域

vue

<!-- vue 转义前 -->
<style lang="scss" scoped>
    .test {
        background: blue;
        span{
            color:red;
        }
    }
</style>
<template>
    <div class="test">
        <span>hello world !</span>
    </div>
</template>
<!-- vue 转义后 -->
<style lang="css">
    .test[data-v-ff86ae42] {
        background: blue;
    }
    .test span[data-v-ff86ae42]{
        color: red;
    }
</style>
<template>
    <div class="test" data-v-ff86ae42>
        <span data-v-ff86ae42>hello world !</span>
    </div>
</template>
<!-- 穿透写法 -->
<template>
  <div class="box">
    <dialog></dialog>
  </div>
</template>
<!--使用 >>> 或者 /deep/ 操作符（Sass 之类的预处理器无法正确解析 >>>，可以使用/deep/）-->
<style lang="scss" scoped>
.box >>> input {
    width: 166px;
    text-align: center;
  }
}
</style>

react + css-modules

// webpack.config.js
modules.exports = {
module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}}
// .css
.title {
  color: red;
}
:global(.title) {
  color: green;
}
// .tsx
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};