Question

在使用React的同时，我想在组件的属性中显示组件名称。例如。如果我有一个组件<LoginBox />，我希望将其呈现为

<div data-react-name="LoginBox">...</div>

但是我希望对每个已转译的组件自动完成此操作。原因是当我检查HTML / DOM中的渲染元素时进行的自动化测试，目前，组件与渲染HTML中的名称没有区别。

我以为我会写一个babel插件，但是我不知道我将使用什么访问者以及如何使其足够健壮。我曾尝试使用google这样的插件，但不知道如何调用它，却发现没有用。

那么有没有插件或任何方法可以实现这一目标？谢谢

Answer 1

现在，一年后，正如我在重新思考，这应该很容易。有关编写插件的更多详细信息，请参见handbook。使用ASTexplorer检查您的代码将产生什么AST。然后，对于生成的树，准备访问者。所以带有代码：

<div><Custom some-prop="prop">Some text</Custom></div>

我们可以推断，我们需要使用访问者JSXOpeningElement并更改node的属性attribute。在此属性-数组中，我们将添加一个新元素，该元素将由Babel.types.jsxAttribute(name, value)创建。我们将从node的属性.name.name（name字符串嵌套在name对象中）中获取标记的名称。我们还需要使用适当的类型。所以看起来像这样：

module.exports =  function(Babel) {
        return {
                visitor: {
                        JSXOpeningElement(path) {
                                const name = Babel.types.jsxIdentifier('data-testname');
                                const value = Babel.types.stringLiteral(path.node.name.name);
                                path.node.attributes.push(Babel.types.jsxAttribute(name, value));
                        }
                }
        };
};

该代码已通过ASTExplorer测试。

在属性中显示反应组件名称

1 个答案: