Web全栈开发学习笔记—Part2 与服务端通信—e.给React应用加点样式

当前应用的外观是相当朴素的。

现在向 React 应用添加样式。以传统的方式将 CSS 放在一个单独的文件中来添加到我们的应用; 先不使用CSS preprocessor 。

在src 目录下添加一个新的index.css 文件，然后通过导入index.js 文件将其添加到应用中:

import './index.css'

让我们在index.CSS 文件中添加如下 CSS 规则:

h1 {
  color: green;
}

CSS 规则由选择器 和声明组成。选择器定义规则应该应用于哪些元素。上面的选择器是h1，它将匹配我们应用中的所有h1 头标记。声明将 color 属性设置为值green。

一个 CSS 规则可以包含任意数量的属性。将字体样式定义为italic:

h1 {
  color: green;
  font-style: italic;}

不同类型的 CSS 选择器有许多匹配元素的方法，参考 different types of CSS selectors。

针对每个便笺的风格可以使用选择器li，因为所有便笺都包装在li 标签中:

const Note = ({ note, toggleImportance }) => {
  const label = note.important 
    ? 'make not important' 
    : 'make important';

  return (
    <li>
      {note.content} 
      <button onClick={toggleImportance}>{label}</button>
    </li>
  )
}

在样式表中加入如下规则:

li {
  color: grey;
  padding-top: 3px;
  font-size: 15px;
}

如果应用包含其他li 标签，那么同样的样式规则也应用于它们。

如果想把风格应用到特定的便笺上，可以使用类选择器。

在HTML 中，class 被定义为class 属性的值:

<li class="note">some text...</li>

在React中，使用className属性而不是 class 属性。对Note 组件进行如下更改:

const Note = ({ note, toggleImportance }) => {
  const label = note.important 
    ? 'make not important' 
    : 'make important';

  return (
    <li className='note'>      {note.content} 
      <button onClick={toggleImportance}>{label}</button>
    </li>
  )
}

类选择器使用. classname 语法定义:

.note {
  color: grey;
  padding-top: 5px;
  font-size: 15px;
}

现在向应用添加其他li 元素，它们将不会受到上述样式规则的影响。

Improved error message

【改进错误信息】

先前实现了当用户试图通过alert方法切换删除便笺的重要性时，显示错误消息。现在将错误消息实现为它自己的 React 组件:

const Notification = ({ message }) => {
  if (message === null) {
    return null
  }

  return (
    <div className="error">
      {message}
    </div>
  )
}

如果 message prop 的值为 null，则不会向屏幕渲染任何内容，在其他情况下，消息会在 div 元素中渲染。

在App 组件中添加一个名为errorMessage 的新状态。用一些错误信息来初始化它，就可以立即测试组件:

const App = () => {
  const [notes, setNotes] = useState([]) 
  const [newNote, setNewNote] = useState('')
  const [showAll, setShowAll] = useState(true)
  const [errorMessage, setErrorMessage] = useState('some error happened...')
  // ...

  return (
    <div>
      <h1>Notes</h1>
      <Notification message={errorMessage} />      <div>
        <button onClick={() => setShowAll(!showAll)}>
          show {showAll ? 'important' : 'all' }
        </button>
      </div>      
      // ...
    </div>
  )
}

然后添加一个适合错误消息的样式规则:

.error {
  color: red;
  background: lightgrey;
  font-size: 20px;
  border-style: solid;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

现在添加显示错误消息的逻辑，更改 toggleImportanceOf 函数:

  const toggleImportanceOf = id => {
    const note = notes.find(n => n.id === id)
    const changedNote = { ...note, important: !note.important }

    noteService
      .update(changedNote).then(returnedNote => {
        setNotes(notes.map(note => note.id !== id ? note : returnedNote))
      })
      .catch(error => {
        setErrorMessage(
          `Note '${note.content}' was already removed from server`
        )
        setTimeout(() => {
          setErrorMessage(null)
        }, 5000)
        setNotes(notes.filter(n => n.id !== id))
      })
  }

当出现错误时，向 errorMessage 状态添加一个错误描述消息。同时启动一个计时器，它将在5秒后将 errorMessage状态设置为null。

结果如下:

fullstack content

Inline styles

【内嵌样式】

React也可以直接在代码中编写样式成为可能，即内联样式。

任何 React 组件或元素都可以通过style属性为 JavaScript 对象提供一组 CSS 属性。

CSS 规则在 JavaScript 中的定义与普通 CSS 文件中的定义稍有不同。假设我们想给一些元素绿色和斜体字体，大小为16像素。在 CSS 中，它看起来像这样:

{
  color: green;
  font-style: italic;
  font-size: 16px;
}

但是React inline style 内置样式对象看起来是这样的:

 {
  color: 'green',
  fontStyle: 'italic',
  fontSize: 16
}

每个 CSS 属性都被定义为 JavaScript 对象的一个独立属性。像素的数值可以简单地定义为整数。与常规 CSS 相比，一个主要的区别是连字符(kebab case)的 CSS 属性是用 camelCase 编写的。

接下来创建一个Footer 组件向应用添加一个“ bottom block” ，并为它定义如下行内样式:

const Footer = () => {
  const footerStyle = {
    color: 'green',
    fontStyle: 'italic',
    fontSize: 16
  }
  return (
    <div style={footerStyle}>
      <br />
      <em>Note app, Department of Computer Science, University of Helsinki 2020</em>
    </div>
   )
}

const App = () => {
  // ...

  return (
    <div>
      <h1>Notes</h1>

      <Notification message={errorMessage} />

      // ...  

      <Footer />    </div>
  )
}

内联样式有一定的限制，如pseudo-classes不能直接使用。

内联样式和其他一些将样式添加到 React 组件的方法完全违背了旧的惯例。传统上是将 CSS 与内容(HTML)和功能(JavaScript)解耦，即将 CSS、 HTML 和 JavaScript 编写到它们各自的文件中。

React是这个极端的对立面。由于将 CSS、 HTML 和 JavaScript 分离成单独的文件在大型应用中不利于伸缩，所以 React 将应用按照其逻辑功能实体进行划分。

构成应用功能实体的结构单元是 React 组件。 React 组件定义了组织内容的 HTML，确定功能的 JavaScript 函数，以及组件的样式;。所有这些都放在一个地方。这是为了创建尽可能独立和可重用的单个组件。