В моей настройке jsx, написанный внутри компонента vue, работает корректно, затем я переношу проект на TS и использую vue-class-component.
Единственное, что работает с TSX для меня, это следующее (как, например, в репо )
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 здесь - без него - этоне работает, но должен
У меня есть компонент, который может принимать реквизит рендеринга.Выглядит так:
// 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 для обычного компонента на основе jue она работает отлично).
Раньше я писал этот 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;
внутри функции create ().Я не вижу этой строки в переданном коде для моего компонента 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"
],
И правила веб-пакета
{
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)
)
},