时间戳

首页 > 解决方案 > 用 React.createElement() 替换 document.createElement()

javascript - 用 React.createElement() 替换 document.createElement()

问题描述

我有一个 javascript 库，它使用document.createElement()它创建一个HTMLElement 我想创建一个具有相同功能的反应库。我的想法是document.createElement()用React.createElement().

所以，原来的代码是这样的 

    this.myElement = document.createElement("input");
   /* some stuff happens here due only after which the followig code is run */
    this.myElement.className = "someClassName";
    this.myElement.style.display = "block";
    this.myElement.appendChild(someElement);

会变成

this.myElement = React.createElement("input");
this.myElement.props.className = "someClassName";
this.myElement.props.style.display = "block"; // Props is read only at this point
this.myElement.appendChild(someReactElement); // This doesn't work either

这里的问题是 props 是 react 中的只读属性， appendChild 也不能以这种方式工作。因此之后 React.createElement("input")无法更改它。我可以在基于原始代码的每个 createElement 调用之前创建 props 对象，但这会显着降低现有代码库的可重用性。有没有办法可以用来绕过这个问题反应？

编辑： 我知道我可以在调用 React.createElement 期间传递子项和道具，但是，它降低了我复制粘贴和重用现有代码库的能力。这个问题是关于在 React.createElement 调用之后更改道具和添加子项的具体问题

标签： javascriptreactjs

解决方案

创建一个 props 对象并将其作为 createElement 函数的第二个参数传递。按照这个-

const props = {
    className: 'someClassName',
    style: {
        display: 'block',
        width: '100%'
    }
}

React.createElement('input', props);

推荐阅读