美文网首页
4.React组件化目录结构组织方式

4.React组件化目录结构组织方式

作者: __疯子__ | 来源:发表于2020-05-20 11:07 被阅读0次

    教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

    1.目录结构

    - src
        - component
            - TodoHeader #组件
                - index.js
                - index.css/sass/less
            - TodoInput #组件
                - index.js
                - index.css/sass/less
            - TodoList #组件
                - index.js
                - index.css/sass/less
                - TodoItem #子组件
                    - index.js
                    - index.css/sass/less
            - index.js #用于导出所有组件
        - App.js #主页面
        - index.js #react主入口
    

    2.目录结构解释
    2.1.src/index.js主入口

    把所有的组件及引用关系组件添加到DOM中

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App.js'
    
    ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));
    

    2.2.src/App.js主页面

    引用所有组件及页面排版

    import React, {Component, Fragment} from 'react';
    import {
        TodoHeader,
        TodoInput,
        TodoList
    } from './component'
    
    class App extends Component {
        render() {
            return (
                //Fragment表示空标签
                //如果不需要的话可以使用Fragment进行替代
                //如果需要添加class等信息还是需要用div
                //或空标签  <> </>  这样也不会报错
                <Fragment>
                    <TodoHeader/>
                    <TodoInput/>
                    <TodoList/>
                </Fragment>
            );
        }
    }
    
    export default App;
    

    2.3.src/components组件目录

    所有组件都放在此目录下

    2.4.src/components/index.js

    用于整合及导出所有组件
    优点:不需要在src/App.js中把所有组件都引用上,这种方式显得结构清晰

    2.4.1.导出组件第一种方式

    import TodoHeader from './TodoHeader'
    import TodoInput from './TodoInput'
    import TodoList from './TodoList'
    export {
        TodoHeader,
        TodoInput,
        TodoList
    }
    

    2.4.2.导出组件第二种方式

    export {default as TodoHeader} from './TodoHeader'
    export {default as TodoInput} from './TodoInput'
    export {default as TodoList} from './TodoList'
    

    两种方式区别:
    方式1:如果组件需要做一些处理的话推荐使用第一种方式
    方式2:如果不需要处理组件,且显得清晰的话推荐第二种
    2.5.src/components/TodoList组件结构
    2.6.src/components/TodoList/index.js组件

    react组件

    2.6.1.组件文件名称命名规则
    2.6.1.1.使用index.js #推荐
    2.6.1.2.使用父文件名命名TodoList.js

    //在index.js中引用 例如:
    //2.6.1.1:
    import TodoList from './TodoList' #推荐使用
    //2.6.1.2:
    import TodoList from './TodoList/TodoList'
    

    2.7.src/components/TodoList/TodoItem子组件目录
    3.组件代码
    3.1.src/components/TodoHeader/index.js

    import React, {Component} from 'react';
    
    export default function TodoHeader(){
        return (
            <h1>待办事项</h1>
        )
    };
    

    3.2.src/components/TodoInput/index.js

    import React, {Component} from 'react';
    
    class TodoInput extends Component {
        render() {
            return (
                <div>
                    组件1
                </div>
            );
        }
    }
    
    export default TodoInput;
    

    3.3.src/components/TodoList/index.js

    import React, {Component} from 'react';
    import TodoItem from './TodoItem'
    
    class TodoList extends Component {
        render() {
            return (
                <ul>
                    <TodoItem/>
                </ul>
            );
        }
    }
    
    export default TodoList;
    

    3.4.src/components/TodoList/TodoItem/index.js

    import React, {Component} from 'react';
    
    class TodoItem extends Component {
        render() {
            return (
                <li>
                    子组件
                </li>
            );
        }
    }
    
    export default TodoItem;
    

    yarn start运行

    相关文章

      网友评论

          本文标题:4.React组件化目录结构组织方式

          本文链接:https://www.haomeiwen.com/subject/hcrgohtx.html