请添加重构操作,以提高在使用JSX/TSX时的生产效率。假设我有以下代码:
class Page extends React.Component {
render() {
return (
<div>
<h1>{this.props.header}</h1>
</div>
);
}
}
我希望选择包含 <h1>
的行,并从上下文菜单中选择 "提取为无状态组件"。这将创建以下无状态组件:
const NewComponent = ({ header }) => (<h1>{header}</h1>);
所选文本将被替换为:
<NewComponent header={this.props.header} />
5条答案
按热度按时间p4rjhz4m1#
如果可以的话,将组件类转换为无状态组件并进行反向转换也是可以的。我认为这是可以通过语言服务插件实现的。
7kjnsjlb2#
我有一个部分可用的版本,但在没有 #15868 的情况下很难使其正常工作。问题在于如何适应
propTypes
。9ceoxa923#
@DanielRosenwasser -是因为在将选定的文本提取到无状态函数后,您还希望生成
propTypes
吗?如果是这样的话,那么也许在不使用propTypes
的情况下生成它会更好 -就我所知,没有必要包含它uelo1irk4#
这个不应该再被阻止了,所以如果你已经有了一个快速解决方案,让我们看看它。
6mzjoqzu5#
这与#25891非常相似。我在这里提出了一个建议:#25891(评论)