2. props.children 与 proptypes

Displaying the login form only when appropriate

在合适的时候显示登录表单
先将LoginForm独立成组件，在loginForm函数中使用内联样式控制是否显示

const App = () => {
  const [loginVisible, setLoginVisible] = useState(false)
  // ...
  const loginForm = () => {
    const hideWhenVisible = { display: loginVisible ? 'none' : '' }
    const showWhenVisible = { display: loginVisible ? '' : 'none' }
    return (
      <div>
        <div style={hideWhenVisible}>
          <button onClick={() => setLoginVisible(true)}>log in</button>
        </div>
        <div style={showWhenVisible}>
          <LoginForm
            username={username}
            password={password}
            handleUsernameChange={({ target }) => setUsername(target.value)}
            handlePasswordChange={({ target }) => setPassword(target.value)}
            handleSubmit={handleLogin}
          />
          <button onClick={() => setLoginVisible(false)}>cancel</button>
        </div>
      </div>
    )
  }
  // ...
}

The components children, aka. props.children

子组件：props.children
新建Togglable组件

import React, { useState } from 'react'
const Togglable = (props) => {
  const [Visible, setVisible] = useState(false)
  const hideWhenVisible = { display: Visible ? 'none' : '' }
  const showWhenVisible = { display: Visible ? '' : 'none' }
  const toggleVisibility = () => {
    setVisible(!Visible)
  }
  return (
    <div>
      <div style={hideWhenVisible}>
        <button onClick={toggleVisibility}>{props.buttonLabel}</button>
      </div>
      <div style={showWhenVisible}>
        {props.children}
        <button onClick={toggleVisibility}>cancel</button>
      </div>
    </div>
  )
}
export default Togglable

props.children是一个数组，可以在此处插入子组件

<Togglable buttonLabel='login'>
  <LoginForm
    username={username}
    password={password}
    handleUsernameChange={({ target }) => setUsername(target.value)}
    handlePasswordChange={({ target }) => setPassword(target.value)}
    handleSubmit={handleLogin}
  />
</Togglable>

Toggable可以重用

<Togglable buttonLabel="new note">
  <NoteForm
    onSubmit={addNote}
    value={newNote}
    handleChange={handleNoteChange}
  />
</Togglable>

State of the forms

表单状态

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.
通常，几个组件需要反映相同的变化数据。 我们建议将共享状态提升到它们最接近的共同祖先。

把NoteForm的状态移到它自己的组件中

import React, {useState} from 'react' 
const NoteForm = ({ createNote }) => {
  const [newNote, setNewNote] = useState('') 
  const handleChange = (event) => {
    setNewNote(event.target.value)
  }
  const addNote = (event) => {
    event.preventDefault()
    createNote({
      content: newNote,
      important: Math.random() > 0.5,
    })
    setNewNote('')
  }
  return (
    <div>
      <h2>Create a new note</h2>
      <form onSubmit={addNote}>
        <input
          value={newNote}
          onChange={handleChange}
        />
        <button type="submit">save</button>
      </form>
    </div>
  )
}

const App = () => {
  // ...
  const addNote = (noteObject) => {
    noteService
      .create(noteObject)
      .then(returnedNote => {
        setNotes(notes.concat(returnedNote))
      })
  }
  // ...
  const noteForm = () => (
    <Togglable buttonLabel='new note'>
      <NoteForm createNote={addNote} />
    </Togglable>
  )
  // ...
}

References to components with ref

创建ref引用组件

import React, { useState, useEffect, useRef } from 'react'
const App = () => {
  // ...
  const noteFormRef = useRef()
  const noteForm = () => (
    <Togglable buttonLabel='new note' ref={noteFormRef}>
      <NoteForm createNote={addNote} />
    </Togglable>
  )
  // ...
}

使用forwardRef和useImperativeHandle配合，使外部能访问组件内部数据

import React, { useState, useImperativeHandle } from 'react'
const Togglable = React.forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false)
  const hideWhenVisible = { display: visible ? 'none' : '' }
  const showWhenVisible = { display: visible ? '' : 'none' }
  const toggleVisibility = () => {
    setVisible(!visible)
  }
  useImperativeHandle(ref, () => {
    return {
      toggleVisibility
    }
  })
  return (
    <div>
      <div style={hideWhenVisible}>
        <button onClick={toggleVisibility}>{props.buttonLabel}</button>
      </div>
      <div style={showWhenVisible}>
        {props.children}
        <button onClick={toggleVisibility}>cancel</button>
      </div>
    </div>
  )
})
export default Togglable

使用ref.current访问引用内的数据

const App = () => {
  // ...
  const addNote = (noteObject) => {
    noteFormRef.current.toggleVisibility()
    noteService
      .create(noteObject)
      .then(returnedNote => {     
        setNotes(notes.concat(returnedNote))
      })
  }
  // ...
}

Exercises 5.5.-5.10.

实现点击按钮显示或隐藏博客内容

import React, { useState } from 'react'
const Blog = ({ blog }) => {
  const [visible, setVisible] = useState(false)
  const [buttonLabel, setButtonLabel] = useState('view')
  const showStyle = { display: visible ? '' : 'none' }
  const toggleVisibility = () => {
    setVisible(!visible)
    if (visible) {
      setButtonLabel('view')
    } else {
      setButtonLabel('hide')
    }
  }
  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 1,
    marginBottom: 5
  }
  return (
    <div style={blogStyle}>
      <div>
        {blog.title} {blog.author} <button onClick={toggleVisibility}>{buttonLabel}</button>
      </div>
      <div style={showStyle}>
        <div>{blog.url}</div>
        <div>likes {blog.likes} <button>like</button></div>
        <div>{blog.author}</div>
      </div>
    </div>
  )
}
export default Blog

更新和删除blog

const update = async (blog, id) => {
  const response = await axios.put(`${baseUrl}/${id}`, blog, config)
  return response.data
}
const deleteBlog = async (id) => {
  await axios.delete(`${baseUrl}/${id}`, config)
}

const removeBlog = async (blog) => {
  try {
    if (window.confirm('do your wanna delete this blog?')) {
      await blogService.deleteBlog(blog.id)
      setBlogs(blogs.filter(item => item.id !== blog.id))
    }
  } catch (error) {
    console.log(error)
  }
}
const updateLikes = async () => {
  const newBlog = { ..._blog, 'likes': _blog.likes + 1 }
  try {
    await blogService.update(newBlog, blog.id)
    setBlog(newBlog)
  }
  catch (error) {
    console.log(error)
  }
}

将blogs按likes排序

setBlogs(blogs.sort((a, b) => b.likes - a.likes))

PropTypes

如果忘记给Toggable传递buttonLabel, 程序能正常工作，但是按钮会变成空白

<Togglable> buttonLabel forgotten... </Togglable>

我们可以使用prop-type包，给组件设置PropTypes，当传递props与要求不符时，控制台会报错
安装

npm install prop-types

定义组件的proptypes

import PropTypes from 'prop-types'
const Togglable = React.forwardRef((props, ref) => {
  // ..
})
Togglable.propTypes = {
  buttonLabel: PropTypes.string.isRequired
}

ESlint

Create-react-app 已经默认为项目安装好了 ESlint， 所以我们需要做的就是定义自己的.eslintrc.js 文件
注意: 不要运行 eslint— init 命令。 它将安装与 create-react-app 创建的配置文件不兼容的最新版本的 ESlint！

安装eslint-plugin-jest

npm install --save-dev eslint-plugin-jest

新建.eslintrc.js文件，添加如下内容

/* eslint-env node */
module.exports = {
  "env": {
      "browser": true,
      "es6": true,
      "jest/globals": true 
  },
  "extends": [ 
      "eslint:recommended",
      "plugin:react/recommended"
  ],
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "plugins": [
      "react", "jest"
  ],
  "rules": {
      "indent": [
          "error",
          2  
      ],
      "linebreak-style": [
          "error",
          "unix"
      ],
      "quotes": [
          "error",
          "single"
      ],
      "semi": [
          "error",
          "never"
      ],
      "eqeqeq": "error",
      "no-trailing-spaces": "error",
      "object-curly-spacing": [
          "error", "always"
      ],
      "arrow-spacing": [
          "error", { "before": true, "after": true }
      ],
      "no-console": 0,
      "react/prop-types": 0
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

如果vscode使用eslint插件报错，Failed to load plugin react: Cannot find module ‘eslint-plugin-react’
在配置文件settings.json中更改

"eslint.workingDirectories": [{ "mode": "auto" }]

在仓库根目录创建文件.eslintignore, 添加下列内容

node_modules
build
.eslintrc.js

在package.json添加scripts

{
  "scripts": {
    "start": "react-scripts start",
    // ...
    "eslint": "eslint ."
  },

当Eslint报LF和CRLF错误时，将linebreak-style的unix改为windows

"linebreak-style": [
  "error",
  "windows"
]

Eslint提示Togglable组件没有display name
添加下列代码修复：

Togglable.displayName = 'Togglable'

添加Eslint后，yarn start运行程序会报错
在.env文件添加下列2行

DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true