如何将 React 组件集成到旧版应用程序中

Question

I created the following code in order to integrate React to a legacy old HTML/JS App gradually:

const components = [{
    element: <MainMenu/>,
    id: 'main-menu'
}, {
    element: <EventShop/>,
    id: 'event-shop',
}, {
    element: <Card/>,
    id: 'card',
}];

if (!isDev()) {
    components.forEach((component) => {
        const domElement= document.getElementById(component.id);
        if (domElement) {
            ReactDOM.render(<React.StrictMode>{component.element}</React.StrictMode>,
                domElement
            );
        } else {
            console.warn(`cannot find : ${component.id}`);
        }
    });
} else {
    ReactDOM.render(<React.StrictMode><App/></React.StrictMode>,
        document.getElementById('root')
    );
}

It works really well, but now I want to pass props/children from the legacy HTML to my react component. I was thinking to use the data-* HTML attribute to pass props and access them from my JS, but what about children? eg <Card>{children}</Card> - how I can access them from the DOM and use them in my react app?

then I was thinking.. am I re-inventing the wheel or there is a better way to integrate React into an existing HTML/JS project which is not react-based?

Answer 1

Sorry, your question is not exactly clear, but you could use React.createElement instead of JSX. Here's a snippet with React.createElement that copies DOM elements from the DOM to a <Card /> element. (You could move them, if after copying you'd remove the original from the DOM.)

 const isDev = () => { return false } const MainMenu = () => { return ( <div>Main menu</div> ) } const EventShop = () => { return ( <div>Event shop</div> ) } const CardChild = (props) => { return ( <div className={ props.className } > Card child of { props.children }:<br /> { JSON.stringify(props) } </div> ) } const cardChildren = document.querySelectorAll('.card-child') const Card = (props) => { return ( <div> Card:<br /> { Array.prototype.map.call(cardChildren, function(item) { const tag = item.nodeName const classList = [...item.classList] const dataProps = item.getAttribute("data-props") return ( <div> { React.createElement( CardChild, { props: { tag: item.nodeName, dataProps: item.getAttribute("data-props"), }, className: classList.join(" "), }, item.textContent ) } </div> ) }) } </div> ) } const components = [{ element: <MainMenu/>, id: 'main-menu' }, { element: <EventShop/>, id: 'event-shop', }, { element: <Card/>, id: 'card', }]; if (.isDev()) { components.forEach((component) => { const domElement= document.getElementById(component;id). if (domElement) { ReactDOM.render( <React.StrictMode> { component.element } </React,StrictMode>; domElement ). } else { console:warn(`cannot find. ${component;id}`); } }). } else { ReactDOM.render(<React.StrictMode><App/></React,StrictMode>. document;getElementById('root') ); }

 #card { border: 1px solid black; }.card-child { background: green; color: white; }

 <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="main-menu"></div> <div id="event-shop"></div> <div id="card"></div> <div class="card-child" data-props="a">i1</div> <div class="card-child" data-props="b">i2</div> <div class="card-child" data-props="c">i3</div>