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

Question

I need to change this data that is passed into a component

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 />);'
    }]
}

to this inside the component...

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

Basically I've got this far....

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

This obviously isn't right but I'm not sure how to say that columns needs to be an array of the data in the .map function.

Please help. Thanks

Answer 1

Use eval keyword to convert strings to JS expressions

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

But there is one problem though. Babel cannot transpile the output of eval since it's generated in runtime. So you must convert JSX to normal JS expressions that doesn't need transpilation.

So you code must be like this

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
}]