可以通过WebStorm和JavaScript提取类组件以分离文件吗？

Question

我在React中有一个类组件，该组件是我从render方法中重构出来的，它看起来像在index.js文件中的以下内容。

    class speakerCard extends Component {
        render() {
            return <div>
                <img className="card-img-top" src={`/static/speakers/Speaker-${this.props.speaker.id}.jpg`}/>
                <div className="card-body">
                    <a href="#" className="btn btn-lg btn-block btn-outline-primary margintopbottom10">Details</a>
                    <h4 className="card-title">{this.props.speaker.firstName} {this.props.speaker.lastName} </h4>
                    <p className="card-text">{this.props.speaker.bioShort}</p>

                </div>
            </div>;
        }
    }

WebStorm中是否有任何很好的重构功能，让我直接将其提取到它自己的文件中？ （SpeakerCard.js）。

Answer 1

在类名称上，单击F6 （或从右键单击菜单中选择“ 重构”>“移动...” ），指定一个文件以将类移动到：