React Union
made with React

React Union是一个针对CMS和门户网站系统的React工具，用于在类似CMS的环境中呈现React应用程序。用户可以将React应用程序视为小部件，为任何给定页面选择小部件的组合和位置。

React Union主要思想是不是直接渲染应用程序，而是渲染描述要渲染的小部件的HTML片段，称为为小部件描述符，React Union然后解析HTML输出并渲染React应用程序。

安装

Npm

npm i react-union

Yarn

yarn add react-union

使用

服务器输出

<main>
    <p>Static content produced by your favourite CMS.</p>


    <div id="hero-container"></div>


    <p>More static content produced by your favourite CMS.</p>

    <!-- A widget descriptor – configuration of your React widget.  -->
    <script
        data-union-widget="hero"
        data-union-container="hero-container"
        type="application/json"
    ></script>
</main>

React组件

// Hero.js

// Main component of your Hero widget
const Hero = () => 'I am Hero!';

// Route is an object that pairs widget descriptors with a widget
export const route = {
    path: 'hero',
    component: Hero,
};

export default Hero;

主应用组件

import React from 'react';
import { Union } from 'react-union';

import { route } from './Hero';

// `Union` renders found widgets into their containers
// but retains a single virtual DOM. Yes, it uses React portals :)

const Root = () => <Union routes={[route]} />;

export default Root;

示例