xs-epanets

xs-epanets

Usage no npm install needed!

<script type="module">
  import xsEpanets from 'https://cdn.skypack.dev/xs-epanets';
</script>

README

laputa-renderer

习题渲染器(可提交答案)

安装

yarn

yarn add laputa-renderer

npm

npm i laputa-renderer

使用

关于习题的 mock 可查看:mock.ts

只展示

/**
 * 只渲染
 */
import React from 'react';
import Renderer from 'lapuata-renderer';

const App: React.SFC<{}> = () => (
  <div>
    <Renderer schemas={MOCK_SCHEMA} />
  </div>
);

可提交答案

/**
 * 可提交
 */
import React, { useCallback } from 'react';
import Renderer from 'laputa-renderer';
import { RenderRef, AnswerItemType } from 'laputa-renderer/dist/types';

const App: React.SFC<{}> = () => {

  const renderer = React.createRef<RenderRef>();

  const handleSubmit = useCallback((answers: AnswerItemType[]) => {
    console.log('answers:::', answers);
  }, []);

  return (
    <div>
      <Renderer
        renderer={renderer}
        schemas={MOCK_SCHEMA}
        onSubmit={handleSubmit}
      />
      <button onClick={() => renderer.current.submit()}>提交</button>
    </div>
  )
}

API

参数 说明 类型
renderer 习题 form 的 ref,可用于触发提交答案 Ref
schemas 习题的 schema,用于渲染习题 TaskTestSchema[]
onSubmit 提交答案的回调 Function(answers)