请添加重构操作，以提高在使用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} />