react-render之ifelse

最新推荐文章于 2024-09-15 07:57:42 发布

原创最新推荐文章于 2024-09-15 07:57:42 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了在React中处理条件渲染时遇到的问题。作者在尝试使用if...else语句根据菜单等级显示相关操作时遇到了错误，具体表现为在调用handleUpdate方法时出现找不到方法的错误。尽管该方法已定义，但可能由于if...else结构导致了this的指向问题。为了解决这个问题，作者改用了三元运算符进行条件判断，从而解决了错误。

场景：根据菜单等级显示相关操作。

开始采用if…… else……方式，结果报错，代码如下：

render : (text, record) => (
	if (text != "c") {
		<span className="table-action">
			<AmdinChildrenMenuModal record={record} onOk={(record) =>this.handleAddChildrenMenu(record)} >
				<Button size="small">添加</Button>
			</AmdinChildrenMenuModal>
			<AmdinMenuModalEdit record={record} onOk={(record) =>this.handleUpdate(record)} >
				<Button size="small">编辑</Button>
			</AmdinMenuModalEdit>
			<Popconfirm title="确定要删除吗？" onConfirm={() => this.handleDelete(record)}>
				<Button size="small">删除</Button>
			</Popconfirm>
		</span>
	} else {
		<span className="table-action">
			<AmdinMenuModalEdit record={record} onOk={(record) =>this.handleUpdate(record)} >
				<Button size="small">编辑</Button>
			</AmdinMenuModalEdit>
			<Popconfirm title="确定要删除吗？" onConfirm={() => this.handleDelete(record)}>
				<Button size="small">删除</Button>
			</Popconfirm>
		</span>
	}
	
)

例如点击编辑时，报错说找不到handleUpdate方法。实际上该方法是有定义的，却说找不到，或许是if else导致了this无法指向handleUpdate方法。于是换成三元运算符的方式：

{
	key: 'grade',
	title : '操作',
	dataIndex: 'grade',
	
	render : (text, record) => (
		<span className="table-action">
			{text != "c" ? <AmdinChildrenMenuModal record={record} onOk={(record) =>this.handleAddChildrenMenu(record)}><Button size="small">添加</Button></AmdinChildrenMenuModal> : ""}
			<AmdinMenuModalEdit record={record} onOk={(record) =>this.handleUpdate(record)} >
				<Button size="small">编辑</Button>
			</AmdinMenuModalEdit>
			<Popconfirm title="确定要删除吗？" onConfirm={() => this.handleDelete(record)}>
				<Button size="small">删除</Button>
			</Popconfirm>
		</span>
	)
	
}

目前解决判断的办法就是这样了，希望大家可以就此问题进行交流。