安装

npm install react-expression-editor -S -D

使用方法

    import { ExpressionEditor, Formula, Expression } from 'react-expression-editor';
    import 'react-expression-editor/dist/index.css';

ExpressionEditor API

| 参数 | 说明 | 类型 | 默认值 | 可选值 | |--------------------------------|-----------------------|-------------------------------------------------------------|-----------|-----------------------| | single | 是否为单个公式 | Boolean | true | true 或 false | | dataSource | 数据源 | Object | null | - | | mode | 简易模式或复杂模式 | String | "base" | "base" 或 "advanced" | | singleProperty | 单个公式操作的属性对象(property) | Object | null | - | | baseFormula | 单个简易公式 | String | "" | - | | advancedFormula | 单个复杂公式 | Object<Formula> | null | - | | baseFormulaQueue | 简易公式的队列 | Array<Object> | [] | - | | advancedFormulaQueue | 复杂公式的队列 | Array<Formula> | [] | - | | onBaseFormulaChange | 单个简易公式变化的回调函数 | function(Object _singleProperty, String baseFormula) | ()=>{} | - | | onBaseFormulaQueueChange | 简易公式的队列变化的回调函数 | function(Array<Object> _baseFormulaQueue) | ()=>{} | - | | onAdvancedFormulaChange | 单个复杂公式变化的回调函数 | function(Object singleProperty, Formula _advancedFormula) | ()=>{}) | - | | onAdvancedFormulaQueueChange | 复杂公式的队列变化的回调函数 | function(Array<Formula> _advancedFormulaQueue) | ()=>{}) | - | | onModeChange | 简易/复杂模式改变的回调函数 | function(String _mode) | ()=>{}) | - |

dataSource的数据结构

    dataSource: {
        data: { // 存放的某类指标的数据
            box: {
                width: 100,
                height: 100,
            },
        },
        dataMapping: { // 存放的某类指标的名称映射
            box: "盒子"
        },
        propertyMapping: { // data存放的某类指标中的属性的名称映射
            width: "宽度",
            height: "高度"
        }
    }

property的数据结构

    property: {
        dataSourceIndex: "box",// 某类指标的KEY
        propertyName: "width",// 某类指标中属性的KEY
    }

Formula类

    // 初始化一个formula对象
    const formula = new Formula(property, dataSource);
    /*
       计算公式的值
       @return {Object} property 计算结果
    */
    formula.getResult();
    // 注：若为单个高级公式 需要先把property设置到formula中
    // 序列化一个formula对象成json
    formula.formatToJson();
    Formula.build(json, dataSource) 把json反序列化一个formula对象

Expression类

    /*
       计算一个简易公式的值
       @param {String} formula 简易公式
       @param {Object} dataSource 数据源
       @return Number
    */
    Expression.getBaseResult(baseFormula, dataSource);