反应原生过滤器列表 - Javascript

在React.js中，过滤器被称为“变换器”(transformers)，它是一个非常有用的函数，可以让我们对渲染的数据进行处理，从而使渲染的结果满足我们的需求。

React.js内置了许多原生的变换器，这些变换器可以满足大多数的需求。下面是React.js中原生过滤器列表：

JSX基础

1. dangerouslySetInnerHTML

通过将一个__html属性传递到一个标签中，可以在渲染预处理后将其呈现为HTML，并在呈现期间不进行编码。这不是建议使用的做法，因为它容易导致XSS攻击。

<div dangerouslySetInnerHTML={{__html: '这是一段html代码'}} />

条件渲染

1. Conditional: The Ternary Operator

渲染一个简单的条件表达式时，可以使用JSX语法中的三元运算符。

{isTrue ? <p>True</p> : <p>False</p>}

2. Conditional: And Operator

如果你不想显示任何内容，可以使用 And 操作符：

{isLoading && <LoadingSpinner />}

3. Conditional: Nullish Coalescing Operator

当值为 null 或 undefined 时，可以使用 Nullish Coalescing 操作符：

{props.quantity ?? 0}

列表渲染

1. Map Function

React中的遍历通常涉及到map函数，可以将每个元素转换为其他内容。

{items.map(item => (
  <li>{item}</li>
))}

2. Index In Map Function

在使用map函数时，使用数组的索引值可以帮助我们指定key。

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

3. Index As A Key

如果你的列表中的元素没有唯一的ID，可以使用它们在列表中的位置作为键。这种做法不是最优的，可能会带来其他问题。

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

4. For ... Of Loop

你可以使用循环来渲染一个列表：

{for (let item of items) (
  <li>{item}</li>
)}

以上就是React.js中原生过滤器的列表，希望本文能对你学习React.js有所帮助。