OSCHINA-MIRROR/dream2023-react-schema-render

react-schema-render

Введение

React-schema-render — это универсальный инструмент для преобразования схемы в компоненты React. Он соответствует стандарту Schema To React (https://dream2023.gitee.io/react-schema-render/стандарт).

Особенности

Небольшой размер: всего 3 КБ;
Мощные функции: поддерживает анализ массивов, глубокую вложенность и смешанное рендеринг;
Высокая расширяемость: поддерживает пользовательские анализаторы и декораторы;
Низкая инвазивность: не требует никаких изменений существующих компонентов для интеграции;
Высокая стабильность: покрытие тестами составляет 100%.

Быстрый старт

Шаг 1: установка

yarn add react-schema-render # npm install react-schema-render -S

Шаг 2: создание сопоставления компонентов

Мы используем carousel из ant-design в качестве примера (только для наглядности, без привязки к конкретной библиотеке UI).

# yarn add antd

import { Collapse } from 'antd';
const { Panel } = Collapse;

const components = {
  collapse: Collapse,
  panel: Panel,
};

Шаг 3: передача сопоставления

import { setComponents } from 'react-schema-render';
setComponents(components);

Шаг 4: определение схемы

const schema = {
  // component представляет компонент
  component: 'collapse',
  // другие атрибуты соответствуют атрибутам компонента
  defaultActiveKey: ['1'],
  // children поддерживает глубокую вложенность
  children: [
    {
      component: 'panel',
      header: '《出塞》',
      key: '1',
      // children является строкой
      children:
        '秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。',
    },
    {
      component: 'panel',
      header: '《寻隐者不遇》',
      key: '2',
      // children является JSX
      children: (
        <>
          <p>松下问童子，言师采药去。</p>
          <p>只在此山中，云深不知处。</p>
        </>
      ),
    },
    {
      component: 'panel',
      header: '《凉州词》',
      key: '3',
      // children представляет собой массив схем
      children: [
        {
          component: 'p',
          key: 1,
          children: '葡萄美酒夜光杯，欲饮琵琶马上催。',
        },
        {
          component: 'p',
          key: 2,
          children: '醉卧沙场君莫笑，古来征战几人回？',
        },
      ],
    },
  ],
};

Шаг 5: использование

import { SchemaRender } from 'react-schema-render';

<SchemaRender schema={schema}></SchemaRender>;

Демо:

import React from 'react';
import { Collapse } from 'antd';
import { setComponents, SchemaRender } from 'react-schema-render';

const { Panel } = Collapse;
const components = {
  collapse: Collapse,
  panel: Panel,
};

setComponents(components);

const App = () => {
  const schema = {
    component: 'collapse',
    defaultActiveKey: ['1'],
    children: [
      {
        component: 'panel',
        header: '《出塞》',
        key: '1',
        // children является строкой
        children:
          '秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。',
      },
      {
        component: 'panel',
        header: '《寻隐者不遇》',
        key: '2',
        // children является JSX
        children: (
          <>
            <p>松下问童子，言师采药去。</p>
            <p>只在此山中，云深不知处。</p>
          </>
        ),
      },
      {
        component: 'panel',
        header: '《凉州词》',
        key: '3',
        // children представляет собой массив схем
        children: [
          {
            component: 'p',
            key: 1,
            children: '葡萄美酒夜光杯，欲饮琵琶马上催。',
          },
          {
            component: 'p',
            key: 2,
            children: '醉卧沙场君莫笑，古来征战几人回？',
          },
        ],
      },
    ],
  };

  return <SchemaRender schema={schema}></SchemaRender>;
};

export default App;

Документация и демо

Для получения дополнительной информации о функциях и API обратитесь к документации:

https://dream2023.gitee.io/react-schema-render

OSCHINA-MIRROR/dream2023-react-schema-render

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/dream2023-react-schema-render .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/dream2023-react-schema-render