用 React.createElement() 替换 document.createElement()答案

【问题标题】：Replacing document.createElement() with React.createElement()用 React.createElement() 替换 document.createElement()
【发布时间】：2021-10-04 09:31:20
【问题描述】：

我有一个使用document.createElement() 的javascript 库，它创建了一个HTMLElement 我想创建一个具有相同功能的反应库。我的想法是用 React.createElement() 替换 document.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 调用之后更改道具和添加子项的具体问题

【问题讨论】：

创建一个props 对象并将其作为createElement 函数的第二个参数传递。 React.createElement('input', props, children)
出于兴趣，您为什么要在 React 组件之外直接调用 React.createElement？（而且编写 JSX 通常也比直接调用 React.createElement 更容易。）
@RobinZigmond。正如问题中提到的，我有一个现有的库，它使用使用 document.createELement 创建的 HTMLElement 。我正在尝试将库转换为 react 。这个库很大，所以在 JSX 中创建一个反应库需要更多的努力。我试图通过想办法最小化改变来最小化我的努力
好的 - 但这并不是真正的方法。 React 从根本上讲是关于创建组件。您当然可以将非 React UI 逐个转换为 React，但每一步都涉及编写 React 组件。在我看来，在 React 组件之外调用 React.createElement 是没有意义的。

标签： javascript reactjs

【解决方案1】：

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

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

React.createElement('input', props);

【讨论】：

【解决方案2】：

阅读React.createElement 的文档。您可以在函数中传递道具（和孩子）。

【讨论】：