ReactJS入门指南—注释第4部分

这是我关于egghead.io的ReactJS初学者指南的第四部分。

样式React组件

本节将说明如何设置React组件的样式，以及解构CSS类如何使我们的组件更灵活。

在下面的代码中查看className和style 。

  const元素=（ 
   
  <div 
  className =“盒子-小” 
 样式= {{paddingLeft：20}} 
  > 
 框

）

注意与普通CSS的语法差异。我们使用className代替class 。它是用骆驼装而不是烤肉串装。我们不能将class用作变量。这将是语法错误。 paddingLeft用相同的样式编写。

style的值为20（类型编号），而不是字符串20px 。 React将其转换为像素。 请注意，值也不是供应商前缀。 同样， style采用对象而不是字符串。我们将很快看到它的用处。

这些简单的CSS样式：

  .box { 
 边框：1px纯黑色； 
  } 

  .box--大{ 
 宽度：240像素； 
 高度：240像素； 
  } 

  .box--medium { 
 宽度：120像素； 
 高度：120px； 
  } 

  .box--小{ 
 宽度：60像素； 
 高度：60px； 
  }

我们得到以下结果：

在这里，我们制作了React组件Box ，让我们使用props参数添加更多道具。除了我们在element的Box声明中添加背景色属性lightblue之外，它与上面的框类似。

 功能盒（道具）{ 
 返回（ 
  <div 
  className =“盒子-小” 
 样式= {{paddingLeft：20}} 
  {...道具} 
  /> 
  ） 
  }

  const元素=（ 
   
  小盒子 
  
 
  ）

这是我们在浏览器上看到的：

由于传播运算符...的递归性质，传递给prop参数的元素中的样式将覆盖Box声明中的样式。因此element的style是浅蓝色背景，将Box的左填充style覆盖。

解构

销毁是一种非常有用的工具，可以用来纠正这种情况。解构是指从对象属性解包值或从数组解包值。

让我们逐步研究一下具有解构性的解决方案：

 函数Box（{style，... rest}）{// 1，然后2 
 返回（ 
  <div 
  className =“盒子-小” 
  style = {{paddingLeft：20，... style}} // 4 
  {... rest} // 3 
  /> 
  ） 
  }

  const元素=（ 
   
  小盒子 
  
 
  ）

我们在Box声明中创建一个名为style的参数。
我们创建另一个名为...rest参数，它将使用其余的道具。
任何样式都将作为Box声明中style的延续形式传入。这样，任何代码都不会被覆盖。
最后添加非样式的其他道具。

我们正在提取属性值lightblue ，并确保它不与任何其他代码冲突。

我们可以使用className实现相同的操作。

 函数Box（{style，className =“”，... rest}）{// 1，然后2 
 返回（ 
  <div 
  className = {`box $ {className}`}

在element声明中创建Box时，可以添加box--small或box--medium 。注意我们如何为className赋予默认值"" 。这是因为如果我们不进行任何传递，则className在DOM中将显示为undefined ，因为它不存在。

在实践中

让我们看看解构样式在实践中如何有所帮助。

我们要制作多个具有不同大小和颜色的盒子。我们可以将className和style颜色应用于它们中的每个。或者，我们可以将道具分解，并使用上面使用的分解模式。

 函数Box（{style，size，className =“”，... rest}）{// 1，然后2 
  const sizeClassName =大小？  `box-$ {size}`：'' 
 返回（ 
  <div 
  className = {`box $ {className} $ {sizeClassName}`} 
  style = {{paddingLeft：20，... style}} // 4 
  {... rest} // 3 
  /> 
  ） 
  }

在上面的代码中，代码作者无需知道不同包装盒尺寸的准确类名称。我们使用字符串模板，以便用户仅键入所需的大小，例如“ small”。如果需要，解构可以使我们的代码更加用户友好。

我们的盒子看起来像这样：

  const元素=（ 
   
  <盒子 
  size =“ small” 
 样式= {{backgroundColor：'lightblue'}} 
  > 
 小盒子 
   
  <盒子 
  size =“ medium” 
 样式= {{backgroundColor：'粉红色'}} 
  > 
 中号盒子 
   
  <盒子 
  size =“大” 
 样式= {{backgroundColor：'橙色'}} 
  > 
 大箱子 
   
  
 
  ）

解构使我们可以在样式化时制作灵活的React组件。

TL; DR

要设置React组件的样式，请使用className属性分配CSS类。
您还可以使用将CSS对象作为值的样式道具
解构使我们可以在样式化时制作灵活的React组件。

我对样式属性的看法

尽管上面的示例说明了style属性如何在React中工作，但将HTML和CSS分开是最佳实践。我想我们应该尝试相同的方法，避免在React中使用style属性。

在React中使用事件处理程序

本节将讨论如何在React中使用事件处理程序。

该代码中将使用事件处理程序示例：

  const state = {eventCount：0，用户名：''}

 函数App（）{ 
 返回（ 
   
   
 发生了{state.eventCount}个事件 
  
 
   
   
  
 
  您键入：{state.username} 
 
   
   
  
 
  
 
  ） 
  }

 函数setState（newState）{ 
  Object.assign（state，newState） 
  renderApp（） 
  }

 函数renderApp（）{ 
  ReactDOM.render（ 
  ， 
  document.getElementById（'root'）， 
  ） 
  }

  renderApp（）

App会创建一个UI。 state跟踪状态，一种用于按钮，另一种用于输入。 setState函数使用传递给setState任何内容更新我们的状态。每当我们调用setState也会使用renderApp函数重新渲染。

用户界面如下所示：

纽扣

我们创建了一个称为increment的函数，并且每次单击按钮时eventCount都会递增。

 函数App（）{ 
 返回（ 
   
   
 发生了{state.eventCount}个事件 
  
 
   
   
  
 
  您键入：{state.username} 
 
   
   
  
 
  
 
  ） 
  }

 函数crement（）{ 
  setState（{ 
  eventCount：state.eventCount + 1， 
  }） 
  }

我们也可以使用onMouseOver做同样的事情。

。

以及onFocus 。

输入项

输入是唯一的，因为它提供了onChange事件。

  <输入 
  onChange = {updateUsername} 
  />

每次输入更改时，都会立即调用此函数。我们需要输入的值来更新用户名状态。

我们将创建一个名为updateUsername的函数，并将event作为参数。

 函数updateUsername（event）{ 
  setState（{ 
 用户名：event.target.value， 
  }） 
  }

event.target获取输入节点， .value获取输入节点的值。现在，只要我们更改输入，就会调用updateUsername 。

反应事件委托和优化

React拥有自己的偶数系统，它通过事件委托为我们优化事情。整个文档中每种类型只有一个处理程序，可以管理调用事件处理程序。

React事件直接在呈现的元素上。传递给事件的内容是对要调用的函数的直接引用，例如onFocus如何直接引用onFocus={increment}的函数increment 。

这样，很容易遵循事件的代码路径。

TL; DR

Button具有各种事件，例如onClick或onFocus 。输入具有唯一的onChange事件，该事件onChange每次输入更改时都会重新呈现。

按钮事件和输入事件都具有传递给花括号的功能。我们可以将函数写在花括号中，也可以将函数写在外面然后传递给他们。