Question

在我的安装在vue组件中的jsx中，它可以正常工作，然后我在TS上迁移项目并使用vue-class-component。

以下是我与tsx一起使用的唯一内容（例如repo中的示例）

import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class TSXTest extends Vue {
  render(h) {
    return <h1>It works</h1>
  }
}

在此处通知h-没有它-它不起作用，但是should

我有一个可以接受渲染道具的组件。看起来像这样：

 // this is js component, so works even without `h` added manually 
 render() {
    return (
      <td>
        {this.$props.render
          ? this.$props.render(this)
          : this.defaultRender(this)}
      </td>
    )
  }

在defaultRender中渲染其他jsx。和默认工作正常。但是，当我尝试通过jsx传递函数时，它不起作用（在TSX中，对于基于常见vue js的组件，它可以完美地工作）。

我曾经将此jsx编写在我创建的挂钩中。像这样：

created() {
    this.columns = [
      {
        field: 'fieldWithCustomRenderFn',
        label: 'Some name',
        renderCell: ({ row }) => (
          <div onClick={() => this.someHandler(row)}>
            {row.someData}
          </div>
        )
      }
    ]
}

请注意，我不必以某种方式通过h。它可以在JS中使用-但不能在TSX中使用。不知道为什么...

转译后，它看起来像这样：

renderCell: function renderCell(_a) {
        var row = _a.row
        return h('a', {
          on: {
            'click': function click(e) {
              _this.someHandler(row)
            }
          }
        }, [row.someData])
      }

实际上，jsx已转换，但是h在此处未定义。我看到了来自js的转译代码（有效），而对我而言，关键的不同之处在于：

var h = this.$createElement;

内部created（）函数。我的tsx组件的编译代码中没有看到这一行。我在这里做错了什么？

这是我的.babelrc（我使用babel 6）

  "presets": [
    ["env", {
      "modules": "commonjs",
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 11"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-vue-jsx",
    "transform-runtime"
  ],

和Webpack规则

      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      },
      {
        test: /\.tsx$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },

Answer 1

这看起来像是known issue，带有babel-plugin-transform-vue-jsx。我通过使用jsx在函数中手动添加此字符串来解决了这个问题：

const h = this.$createElement;

在编译和正常工作方面，它可以正常工作。但这当然只是拐杖。

Vue：不能与TSX

1 个答案: