简单的React目录结构

组件化项目的目录结构

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

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

例如：

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      

        添加
      
    )
  }
}

在components的index.js文件中引入

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      

        添加
      
    )
  }
}

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

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

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

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

export default class App extends Component {
  render() {
    return (
      

        {/* 多个组件组合的时候必须有一个根元素 */}
        
        
        
      
    )
  }
}

每个组件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 (
      
        {/* 多个组件组合的时候必须有一个根元素 */}
        
        
        
      
    )
  }
}

也可以写成空标签

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

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

• 使用prop传递参数

  import React, { Component } from 'react'
  import {
    TodoHeader,
    TodoInput,
    TodoList
  } from './components'
  
  export default class App extends Component {
    render() {
      return (
        <>
          {/* 多个组件组合的时候必须有一个根元素 */}
          
          {/* 传递子元素 props-children*/}
            待办事项
          
          {/* 向组件传递参数 */}
          
          
        
      )
    }
  }
  
  

  • 使用函数式组件接受参数

    import React from 'react'
    import PropTypes from 'prop-types'
    // 让组件变得刚强大，更方便开发人员检查
    
    export default function TodoHeader( props) {
      console.log(props)
      return (
        <>
        
    
          {/* 代表的是标签里面的内容 */}
          {props.children}
        
        
    
          {props.desc}
        
        
      )
    }
    
    

  • 使用组件类接受参数

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    export default class index extends Component {
      render() {
        return (
          
    
            {this.props.btnText}
          
        )
      }
    }
    
    

• 使用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 (
    <>
    

      {/* 代表的是标签里面的内容 */}
      {props.children}
    
    

      {props.desc}
      
{props.x + props.y}
    
    
  )
}

// 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 (
      

        {this.props.btnText}
      
    )
  }
}

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

export default class App extends Component {
  render() {
    return (
      <>
        {/* 多个组件组合的时候必须有一个根元素 */}
        
        {/* 传递子元素 */}
          待办事项
        
        {/* 向组件传递参数 */}
        
        
      
    )
  }
}

• 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: '
jiagsgsg
',
      todos : [{
        id: 1,
        title: '学习',
        isCompleted: 'false'
      },{
        id: 2,
        title: '吃饭',
        isCompleted: 'true'
      }]
    }
  }
  render() {
    return (
      <>
        {
          

        }
        {
          this.state.todos.map(todo => {
            return 
{todo.title}
          })
        }
      
    )
  }
}

import React, { Component } from 'react'
import TodoItem from './TodoItem'
export default class TodoList extends Component {
  render() {
    console.log(this.props)
    return (
      

        {
          this.props.todos.map(todo => {
            return(
              // 
              //使用对象展开的方法在这里就能取到更新的数据
              
            )
          })
        }
      
    )
  }
}

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 (
      

        
        {this.props.btnText}
      
    )
  }
}