react 学习笔记

2023.4.18

创建一个项目

npx create-react-app feedback-app --use-npm

之后

npm start

然后

code.

jsx里循环一个dom

{comments.map((comment, index) => (
  <li key={index}>{comment.index}</li>
))}

组件传props

<Header text='good' />

组件内

1. 通过({text})接收props可以直接使用
2. 使用Header.defaultProps = 来设置没有传参的时候的默认值
3. 使用Header.propTypes = 来设置参数格式和是否必须

import PropTypes from 'prop-types'

function Header({ text }) {
  return (
    <div className='container'>
      <h2>{text}</h2>
    </div>
  )
}

Header.defaultProps = {
  text: 'Feedback UI',
}

Header.propTypes = {
  text: PropTypes.string.isRequired,
}

export default Header

控制useState的时候，可以用prev获取改变前的值

setRating((prev) => {
  return prev + 1
})