使用XRender(1)_引入编辑器

安装

    npm i fr-generator

使用

    import { useDispatch } from 'umi';
    import Generator from 'fr-generator';
    import { useEffect,useRef } from 'react';

    const NewsManage = () => {
      const dispatch = useDispatch()
      const genRef = useRef();

      const buttonClick = ()=> {
        const value = genRef.current && genRef.current.getValue();
        
        // 调取后端接口
        dispatch({
          type: 'designServe/saveFormList',
          payload: {
            key: 'testKey1',
            name: 'testName1',
            userId: '0036',
            definition: JSON.stringify(value)
          },
        });
      }

      return (
        <div style={{ height: '80vh' }}>
          <Generator ref={genRef} extraButtons={[
            false,
            false,
            false,
            false,
            {
              text: '我的测试',
              onClick: buttonClick 
            }
          ]}/>
        </div>
      );
    };

    export default NewsManage;

遇到的问题

当想取消默认的按钮时，需要在extraButtons中将默认展示的状态变为false；通过ref和内置的getValue方法获取到表单的json串