有没有“jQuery for React AST”这样的东西？像jQuery一样，它允许对包含JSXNode等内容的AST进行优雅的搜索、遍历、创建和变异？我看到Acorn有一些基本的遍历功能，但它不太适用于重复进行重新排序、插入、用{flag && } Package 组件以进行条件渲染等。我甚至不知道如何谷歌这个除了“jquery为AST”，嗯，是的，没有工作。
yr9zkbsy1#
您可以使用Subsecond来实现此目的，如下所示：输入：
<h1>hello world</h1>
输出量：
<h2>hello world</h2>
转型：
S('JSXIdentifier').each((node) => { node.text('h2'); })
📜 这里是playground。
还有一种方法可以在我正在开发的Putout的帮助下使用声明式方法来做类似的事情🐊：
输入：
输出：
转换：
export const replace = () => ({ '<h1>__a</h1>': '<h2>__a</h2>', });
🐊📜 这里是Playground。
您也可以将属性className变更为class：
className
class
const div = <div className="abc">{x}</div>
const div = <div class="abc">{x}</div>
export const replace = () => ({ '<div className="__a">__jsx_children</div>': '<div class="__a">__jsx_children</div>', });
🐊📜 这里是Playground
1条答案
按热度按时间yr9zkbsy1#
亚秒级
您可以使用Subsecond来实现此目的，如下所示：
输入：
输出量：
转型：
📜 这里是playground。
🐊推出
还有一种方法可以在我正在开发的Putout的帮助下使用声明式方法来做类似的事情🐊：
更改标记
输入：
输出：
转换：
🐊📜 这里是Playground。
更改属性
您也可以将属性
className变更为class：输入：
输出：
转换：
🐊📜 这里是Playground