优化企业网站排名要多少钱/营销自动化工具

目录

Improved error message

Inline styles

---

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

现在向 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。

结果如下:

 

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 函数，以及组件的样式;。所有这些都放在一个地方。 这是为了创建尽可能独立和可重用的单个组件。