可以使用 WebStorm 和 JavaScript 将 class 组件提取到单独的文件中吗？

Question

我在 react 中有一个 class 组件，我从 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

在 class 名称上，点击 F6（或从右键菜单中选择 Refactor > Move...），指定要移动的文件class 至：

可以使用 WebStorm 和 JavaScript 将 class 组件提取到单独的文件中吗？

Possible With WebStorm and JavaScript to extract a class compponent to separate file?

webstorm

reactjs