使用 .map (React) 将 JSX 字符串转换为 JSX 表达式

Question

我需要更改传递到组件中的数据

columns={[{
    name: "Fund Name",
        width: "40%"
    }, {
        name: "Review Date",
        width: "20%"
    }, {
        name: "Company Debt",
        width: "20%"
    }, {
        name: "Alerts",
        width: "10%"
    }, {
        name: "Actions",
        width: "10%",
        options: 'customBodyRender: (value, tableMeta, updateValue) => { return (<Options />);'
    }]
}

到这个组件内部...

const columns = [{
            name: "Fund Name",
        }, {
            name: "Review Date"
        }, {
            name: "Company Debt"
        }, {
            name: "Alerts",
        }, {
            name: "Actions",
            options: {
                customBodyRender: (value, tableMeta, updateValue) => {
                    return ( <Options /> );
                }
            }
        }
    }];

基本上我已经到了这一步......

let columns = this.props.columns.map((item, key) =>
   { name: item.name }
);

这显然是不对的，但我不确定如何说列必须是 .map 函数中的数据数组。

请帮忙。 谢谢

Answer 1

使用eval关键字将字符串转换为 JS 表达式

let columns = this.props.columns.map(item =>
   item.options 
    ? ({ ...item, options: eval(item.options) })
    : item
);

但是有一个问题。 Babel 无法转译eval的输出，因为它是在运行时生成的。 因此，您必须将 JSX 转换为不需要转译的普通 JS 表达式。

所以你的代码一定是这样的

const columns = [{
  name: "Actions",
  options: {
    customBodyRender: '(value, tableMeta, updateValue) => { return React.createElement(Options, null); }'
      // or 
    customBodyRender: '(value, tableMeta, updateValue) => { return /*#__PURE__*/_react.default.createElement(Options, null); }'
      // Depends on your babel configurations
}]