Vue：不能在 TSX 中使用渲染道具答案

【问题标题】：Vue: can't use render props with TSXVue：不能在 TSX 中使用渲染道具
【发布时间】：2019-07-18 22:15:48
【问题描述】：

在我的设置中，在 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)
        )
      },

【问题讨论】：

标签： typescript vue.js vuejs2 tsx vue-class-components

【解决方案1】：

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

const h = this.$createElement;

就编译和工作正常而言，它可以正常工作。当然，这只是一根拐杖。

【讨论】：