2

我正在做一个小项目，我需要从树中删除特定组件而不删除其子项。

让我们想象下面的代码：

export const Component = () => {
  return (
    <>
      <Background color="red">
        <div>Red background</div>
      </Background>
      <Background color="blue">
        <div>Blue backgound</div>
      </Background>
    </>
  );
};

使用 jscodesift，我想删除<Background color="XXX">打开和关闭元素，以便输出为：

export const Component = () => {
  return (
    <>
      <div>Red background</div>
      <div>Blue backgound</div>
    </>
  );
};

现在，我一直在努力寻找一种方法来删除nodePath.node.openingElement和nodePath.node.closingElement不删除他们的孩子。

有人知道我想做的事情是否可行吗？什么可以帮助我解决这个问题？

4

1 回答 1

2

您必须提升到开始和结束标记（JSXElement）的父元素并用它的子元素替换它。一种快速而肮脏的方式可能如下所示：

export default function transformer(file, api) {
  const j = api.jscodeshift;

  return j(file.source)
    .find(j.JSXIdentifier, { name: "Background" })
    .filter((path) => j.JSXOpeningElement.check(path.parent.node))
    .forEach((path) => {
      j(path.parent.parent).replaceWith(path.parent.parent.get("children").value);
    })
    .toSource();
}

游乐场示例：https ://astexplorer.net/#/gist/325d128229e633b5d11343d9ee0e86fc/latest

于 2021-12-09T13:06:11.467 回答