无法访问返回 jsx 中的 Vue 实例

Question

我做了一个表组件，在每一列中我都放了jsx语法返回函数来渲染HTML，但是在渲染的返回中，我想用this.firstName = item ;更改组件的数据(项目在渲染函数内(，但我无法访问它。 我如何在 Vue 中访问渲染的内部返回.js ？ 这是我的代码：

field: 'id',
caption: '',
sortable: false,
render: (item) => (h) => {
return (
<td class="uk-text-middle uk-text-center">
<div class="uk-inline">
<span class="more-option" uk-icon="icon: more"></span>
<div class="uk-padding-small" uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav uk-text-right">
<li>
<button onClick={ () => {console.log(this)} }>
<span class="uk-margin-small-left" uk-icon="icon: file-edit"></span>
edit
</button>
</li>
<li>
<a href="#">
<span class="uk-margin-small-left" uk-icon="icon: trash"></span>
delete
</a>
</li>
</ul>
</div>
</div>
</td>
);
}

Answer 1

由于使用嵌套匿名函数，因此this的内部函数作用域不同。 你可以绑定this，或将this赋值给上层函数中的另一个变量

(item) => {
const self = this;

return (h) => (

<button onClick={ () => {console.log(self)} }>
<span class="uk-margin-small-left" uk-icon="icon: file-edit"></span>
edit
</button>
);
}