如何將 React 組件集成到舊版應用程序中

Question

我創建了以下代碼，以便逐漸將 React 集成到舊的 HTML/JS 應用程序中：

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

它工作得非常好，但現在我想將舊 HTML 中的道具/子代傳遞給我的反應組件。 我正在考慮使用data-* HTML 屬性來傳遞道具並從我的 JS 訪問它們，但是孩子呢？ 例如<Card>{children}</Card> - 我如何從 DOM 訪問它們並在我的反應應用程序中使用它們？

然后我在想..我是在重新發明輪子還是有更好的方法將 React 集成到現有的不基於反應的 HTML/JS 項目中？

Answer 1

抱歉，您的問題並不完全清楚，但您可以使用React.createElement而不是 JSX。 這是一個帶有React.createElement的片段，它將 DOM 元素從 DOM 復制到<Card />元素。 （如果在復制后從 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>