1

我正在尝试将 JSX 属性的输出值从字符串转换为表达式/函数调用。

鉴于源代码看起来像......

function dynamicClasses() {
    //... do something
}

export default () => <div dynamic="hello world"></div>

Babel 翻译代码后的期望输出将是......

function dynamicClasses() {
    //... do something
}

export default () => <div class={dynamicClasses("hello world")}></div>

我有以下找到该属性的内容，但我正在努力用表达式/函数调用替换字符串值。

const convertClassNameIntoDynamicStyles = ({types: t}) => {
    return {
        visitor: {
            JSXOpeningElement(path) {
                path.get('attributes').forEach(attribute => {
                    if (attribute.node.name.name === 'dynamic') {
                        const classNames = attribute.node.value;

                        attribute.remove();

                        path.node.attributes.push(t.JSXAttribute(
                            t.JSXIdentifier('class'),
                            `myFunctionCallHere(${classNames})`
                        ));
                    }
                })
            },
        },
    }
}

module.exports = convertClassNameIntoDynamicStyles;

第 13 行myFunctionCallHere(${classNames})是我无法弄清楚如何变成 AST 样式表达式的地方，这样做的正确方法是什么？

谢谢

4

0 回答 0