ES6文内件多个Clss时WebStorm不能自动补全

2016-12-03

一个文件多个Class

在写JSX的时候经常会有这个需求，一个Component中有多个子Component都写在一个文件里

虽然有时候页面可以正常运行，但是 WebStorm却不会对其自动补全

import FaBars from "react-icons/fa/bars";

class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==此处可以进行自动补全
                <TitleBox />            <==此处不会自动补全
                <UserBox />             <==此处不会自动补全
            </div>
        )
    }
}

class TitleBox extends Component {...}

class UserBox extends Component {...}

搞得我很困惑，为了让其能自动补全，我发现可以通过大括号强行让其按JavaScript解析而不是JSX

//妥协的解决方案
class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==此处可以进行自动补全
                {<TitleBox />}          <==使用大括号进入JS作用域
                {<UserBox />}           <==可以完成正常的自动补全
            </div>
        )
    }
}

正确的解决方案

后来满满了解了ES6之后，才发现是变量作用域的问题啊。。。。class是个变量，需要声明后才能被WebStorm自动补全

import FaBars from "react-icons/fa/bars";

class TitleBox extends Component {...}

class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==因为import的FaBars在class Header以上
                <TitleBox />            <==此处可以进行自动补全同FaBars
                {<UserBox />}           <==此处还是不会自动补全
            </div>
        )
    }
}

class UserBox extends Component {...}

问题的核心分析

其实在写代码中不管怎么写都可以运行，但是这里牵扯到了两个知识点值得注意

一个文件多个class虽然是没有作用域的，但是如果相对class执行函数则是有的，参考文章Redux进行多个Connect
WebStorm进行分析的时候采用了作用域的分析，仅仅是这个IDE的代码分析逻辑的问题
妥协的解决方式，其实是在JSX中采用大括号强行转入JS代码，就如同{style.root}一样