Question

想象一个函数，其签名如下：

const columns = [
    { key: 'id', name: 'ID', resizable: true, locked: true, sortable: true },
    {
        key: 'name',
        name: 'Name',
        editable: true,
        resizable: true,
        sortable: true,
    },
];
const UserList = props => (
   <List {...props}>
       <EditableDatagrid columns={columns} pageSize={5} />
   </List>
)

要实现该功能，您将必须检查元素是使用function readElement(element: HTMLElement): string;属性（即value）还是HTMLInputElement属性（即textContent）并获取各自的财产。我要问的是几种可以实现SpanElement，万无一失且具有高浏览器兼容性的方法。

以下是我过去用来解决该问题的方法的列表：

readElement
element.value !== undefined
element.constructor.hasOwnProperty("value")
typeof element.value === "string"

Answer 1

要测试对象是否具有属性，只需使用'prop' in obj：

[...document.body.querySelectorAll('*')].forEach((el)=> {
  console.log(el.tagName + ' contains: ' + readEl(el));
})

function readEl(el) {
  return 'value' in el ? el.value : el.textContent || false;
}

<p>para</p>
<input value="input" />
<textarea>textarea</textarea>
<div>div</div>

检查HTMLElement是否包含value属性的最佳方法

1 个答案: