使用 .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
}]