我们如何在 React JavaScript 中使用管道？

Question

在 Angular 中，我们可以创建 自定义管道 来更改数据格式。例如，请参阅 UpperCasePipe ：

 {{ value_expression | uppercase }}

React 中似乎没有管道，所以我的问题是：我们如何在 React 中使用管道？

原文由 kamal aryal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根本没有管道，因为括号中计算的任何内容都被认为是纯 JavaScript。因为这是作为纯 javascript 评估的，所以根本不需要管道。如果 this.state.variable 是一个字符串，我可以使用 .toUpperCase() 原型以全部大写显示该字符串：

 {this.state.variable.toUpperCase()}

这在功能上等同于 UpperCasePipe ：

 {{variable | uppercase}}

只需创建一个包装函数并使用它就足够简单了。例如，如果你想创建一个自定义函数来仅将第一个字母大写，我们可以从 这里 使用这个函数：

 function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

然后我们会这样称呼它：

 {capitalizeFirstLetter(this.state.variable)}

原文由 Blue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

JSX 中 {} 中的表达式只是纯 JavaScript。 | 是按位的 OR 。没有类似 Angular 的“管道”。不过，JavaScript 函数可以实现相同的目的。

或者，要获得记忆，请尝试新的 useMemo() 挂钩

原文由 נשמה קשוחה 发布，翻译遵循 CC BY-SA 4.0 许可协议