简单的React目录结构

组件化项目的目录结构

新建一个components目录写一个components的index.js文件用来导出各个组件，然后写好需要的模块

并为每个模块写一个index.js文件

例如：

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <div>
        <input type="text" /><button>添加</button>
      </div>
    )
  }
}

在components的index.js文件中引入

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <div>
        <input type="text" /><button>添加</button>
      </div>
    )
  }
}

这时就能在'App.js'中引入模块，直接使用

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </>
    )
  }
}

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </div>
    )
  }
}

每个组件return的东西必须只有一个根元素

多个组件组合的时候，外层就需要一个div

但是加div会额外生成一个空的div，但有时候是需要这个dom的

如果不想要这个div，react提供了一个组件fragment，用来展示空标签

import React, { Component, Fragment } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <Fragment>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </Fragment>
    )
  }
}

也可以写成空标签

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </>
    )
  }
}

使用prop传递参数

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader 
         desc="今日事，今日毕"
        >
        {/* 传递子元素 props-children*/}
          待办事项
        </TodoHeader>
        {/* 向组件传递参数 */}
        <TodoInput btnText="Add"/>
        <TodoList />
      </>
    )
  }
}

使用函数式组件接受参数

import React from 'react'
import PropTypes from 'prop-types'
// 让组件变得刚强大，更方便开发人员检查

export default function TodoHeader( props) {
  console.log(props)
  return (
    <>
    <h1>
      {/* 代表的是标签里面的内容 */}
      {props.children}
    </h1>
    <h3>
      {props.desc}
    </h3>
    </>
  )
}

使用组件类接受参数

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class index extends Component {
  render() {
    return (
      <div>
        <input type="text" /><button>{this.props.btnText}</button>
      </div>
    )
  }
}

使用prop-types检测传入的参数是否符合要求

npm i prop-types --save

函数式组件设置默认值

import React from 'react'
import PropTypes from 'prop-types'
// 让组件变得刚强大，更方便开发人员检查

export default function TodoHeader( props) {
  console.log(props)
  return (
    <>
    <h1>
      {/* 代表的是标签里面的内容 */}
      {props.children}
    </h1>
    <h3>
      {props.desc}
      <p>{props.x + props.y}</p>
    </h3>
    </>
  )
}

// eslint-disable-next-line react/no-typos
TodoHeader.propTypes = {
  desc: PropTypes.string,
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired
}

类组件设置默认值

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class index extends Component {
  static propTypes = {
    btnText: PropTypes.string
  }
  static defaultProps = {
    // 组件默认值传了的话就使用外面的，没传就使用默认的
    btnText: "添加Todo"
  }
  render() {
    return (
      <div>
        <input type="text" /><button>{this.props.btnText}</button>
      </div>
    )
  }
}

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  render() {
    return (
      <>
        {/* 多个组件组合的时候必须有一个根元素 */}
        <TodoHeader desc="今日事，今日毕" x="1" y={2}>
        {/* 传递子元素 */}
          待办事项
        </TodoHeader>
        {/* 向组件传递参数 */}
        <TodoInput btnText="Add"/>
        <TodoList />
      </>
    )
  }
}

props默认值

函数式组件设置默认值

TodoHeader.defaultProps = {
  desc: '明天'
}

类组件设置默认值

  static defaultProps = {
    // 组件默认值传了的话就使用外面的，没传就使用默认的
    btnText: "添加Todo"
  }

state定义组件内部状态，有状态组件

第一种初始化state的方式

```js
 state = {
    title: '待办事项列表1'
  }
```

第二种初始化state的方式

```js
  constructor() {
    super()
    this.state = {
      title: '待办事项列表'
    }
  }
```

16.8之前函数式组件没有this，也没有state

import React, { Component } from 'react'
import {
  TodoHeader,
  TodoInput,
  TodoList
} from './components'

export default class App extends Component {
  // state = {
  //   title: '待办事项列表1',
  // }

  constructor() {
    super()
    this.state = {
      title: '待办事项列表',
      desc:'今日事，今日毕',
      article: '<div>jiagsgsg</div>',
      todos : [{
        id: 1,
        title: '学习',
        isCompleted: 'false'
      },{
        id: 2,
        title: '吃饭',
        isCompleted: 'true'
      }]
    }
  }
  render() {
    return (
      <>
        {
          <div dangerouslySetInnerHTML = {{__html:this.state.article}}/>
        }
        {
          this.state.todos.map(todo => {
            return <div key="todo.id">{todo.title}</div>
          })
        }
      </>
    )
  }
}

import React, { Component } from 'react'
import TodoItem from './TodoItem'
export default class TodoList extends Component {
  render() {
    console.log(this.props)
    return (
      <ul>
        {
          this.props.todos.map(todo => {
            return(
              // <TodoItem
              // key={todo.id}
              // id={todo.id}
              // title={todo.title}
              // isCompleted={todo.isCompleted}
              // />
              //使用对象展开的方法在这里就能取到更新的数据
              <TodoItem
                key={todo.id}
                {...todo}
              />
            )
          })
        }
      </ul>
    )
  }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class index extends Component {
  static propTypes = {
    btnText: PropTypes.string
  }
  static defaultProps = {
    // 组件默认值传了的话就使用外面的，没传就使用默认的
    btnText: "添加Todo"
  }
  constructor () {
    super()
    this.state = {
      inputValue: ''
    }
  }
  handleInputChange = (e) => {
    this.setState({
      inputValue:e.currentTarget.value
    })
  }
  render() {
    return (
      <div>
        <input 
        type="text" 
        value={this.state.inputValue}
        onChange={this.handleInputChange}
        />
        <button>{this.props.btnText}</button>
      </div>
    )
  }
}

简单的React目录结构

组件化项目的目录结构

推荐阅读更多精彩内容