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

Question

I have a javascript library which uses document.createElement() which creates an HTMLElement I want to create a react library with the same functionality. My idea was to replace the document.createElement() with React.createElement() .

So , the original code which was something like

    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);

will become

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

The problem here is that props is a read only property in react , also appendChild doesn't work that way in. So changing it after React.createElement("input") is not possible. I can create the props object before each createElement call based on the original code but it significantly reduces reusability of the existing code base. Is there a way around that can be used to bypass this issue in react ?

Edit : I know I can pass children and props during the time I call React.createElement however , it reduces my ability to copy paste and reuse the existing code base . The question is specific about changing props and appeding child after the React.createElement call

Answer 1

Create a props object and pass that as the 2nd argument of the createElement function. Follow this-

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

React.createElement('input', props);

Answer 2

Read the documentation for React.createElement . You can pass the props (and children) in the function.