JS

Question

我正在构建一个小实验应用程序，它应该使用用户html / svg输入并将其呈现为React虚拟DOM元素。基本上我有：

const dom = new DOMParser().parseFromString(<user input>);

const node = e => React.createElement(
  e.localName,
  [...e.attributes]
    .map(attr => attr.name)
    .reduce((props, name) => {

      //i need that test
      if (<name is a proper react attribute>) {
        props[name] = e.getAttribute(name);
      }

      return props;
    }, {}),
  [...e.children].map(child => node(child))
);

如果输入为svg，则React正在抱怨Unknown props，如xlink:href。所以我需要过滤掉所有»未知的道具«。为了做到这一点，将该列表作为JS对象非常有用。

我想知道/将会是这样的：

import { KnownProps } from 'react';

const testIfProperName = name => 
  KnownProps.hasOwnProperty(name);

编写所需的测试。

是否存在此类列表，如果存在，是否可以将其导入我的程序？

Answer 1

看看react-html-attributes。