时间戳

首页 > 解决方案 > 什么是用于检查属性是否适用的 Reacts 函数？

reactjs - 什么是用于检查属性是否适用的 Reacts 函数？

问题描述

基于此问答：

React 包装器：React 无法识别 DOM 元素上的 `staticContext` 道具

答案对我的场景来说不是很好，我有很多道具，并且真的不喜欢复制粘贴，希望接下来接触代码的人都会更新两者。

所以，我认为可能起作用的只是重新利用 React 用来检查属性是否适合在提交之前有条件地删除属性的任何功能。

像这样的东西：

import { imaginaryIsDomAttributeFn } from "react"
...

render() {
    const tooManyProps = this.props;
    const justTheRightProps = {} as any;
    Object.keys(tooManyProps).forEach((key) => {
        if (imaginaryIsDomAttributeFn(key) === false) { return; }
        justTheRightProps[key] = tooManyProps[key];
    });
    return <div {...justTheRightProps} />
}

我在 Reacts index.t.ts 中找到了 DOMAttributes 和 HTMLAttributes，并且可能将它们变成大量字符串来检查键，但是......我宁愿把它作为最后的手段。

那么，React 是如何进行检查的呢？我可以重用他们的代码吗？

标签： reactjs

解决方案

验证属性名称的 React 内部函数位于：https ://github.com/facebook/react/blob/master/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js

它检查属性的主要内容是此处的“possibleStandardNames”属性列表：https ://github.com/facebook/react/blob/master/packages/react-dom/src/shared/possibleStandardNames.js

因此，要重用他们的代码，您可以将属性列表复制possibleStandardNames.js到您的项目中，然后使用它来过滤掉未在其中列出的属性。

推荐阅读