英文:
run a function in react render method jsx template string
问题
我有一个简单的函数来大写 timer_type 的第一个字母，这个函数是：
return string.charAt(0).toUpperCase() + string.slice(1)
}```
在我的应用程序的渲染方法中，我有一个较长的模板字符串，然后在 `timerTypes.find` 方法中，当有一个按类型计时器时，我需要第一个字母大写。因此，需要调用 `capitalize` 函数。您可以如何在 JSX 内联调用一个函数呢？
<Box
sx={{
marginBlock: 3,
display: 'flex',
flexDirection: 'column',
}}
{timerHistory &&
timerHistory.map((history, index) => (
{${ timerTypes.find( (type) => type.id === history.timer_type )?.timer_type.capitalize } for ${toTime(history.duration_seconds)}}
{ on a ${Math.round( history.goal_seconds / 60 )} minute timer ${age(history.created_at)}}
))}
这段代码将会调用 `capitalize` 函数来使 `timer_type` 的第一个字母大写。
<details>
<summary>英文:</summary>
I have a simple function to capitalize the first letter of timer_type,
the func is ```const capitalize = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1)
}```
In the render method of my app I have a long template string, the in the timerTypes.find method when there is a timer by type, I need the first letter to be uppercase. So need to invoke the capitalize. how would you invoke a function inline of a jsx?
<Box
sx={{
marginBlock: 3,
display: 'flex',
flexDirection: 'column',
}}
>
{timerHistory &&
timerHistory.map((history, index) => (
<Box key={index}>
<strong>
{${}
timerTypes.find(
(type) => type.id === history.timer_type
)?.timer_type.capitalize
} for ${toTime(history.duration_seconds)}
</strong>
{ on a ${Math.round(}
history.goal_seconds / 60
)} minute timer ${age(history.created_at)}
</Box>
))}
</Box>
</details>
# 答案1
**得分**: 2
在JSX内联调用`capitalize`函数时，您可以使用花括号{}将该函数括起来。
```javascript
{capitalize("A test string")} //应该有效。
了解更多信息，请访问这里：
https://react.dev/learn/javascript-in-jsx-with-curly-braces
英文:
To invoke the capitalize function inline of a JSX, you can use the curly braces {} to enclose the function.
{capitalize("A test string")} //should work.
Read more about it here:
https://react.dev/learn/javascript-in-jsx-with-curly-braces
答案2
得分: 1
你正在问的只是...如何在JavaScript中调用函数。
看看你这里的内容：
timerTypes.find(
(type) => type.id === history.timer_type
)?.timer_type.capitalize
你所做的只是将函数的名称附加到某个值上。但是你的函数并没有被定义为某个类或类型的一部分（与此代码行上也使用的find函数不同，它在Array类型上被定义）。即使它被定义了，你仍然没有调用该函数（就像你在这里已经用find函数做的那样）。
你的函数只是一个普通函数。它直接被调用并传递一个值。所以你会直接调用它，并传递一个值：
capitalize(timerTypes.find(
(type) => type.id === history.timer_type
)?.timer_type)
为了更多练习和了解如何在JavaScript中定义和使用函数，强烈建议你从一些关于JavaScript语言的入门教程开始。构建React应用程序是一个相对高级的主题，不适合作为语言基本语法和结构的介绍。
英文:
What you're asking is simply... How to call a function in JavaScript.
Take a look at what you have here:
timerTypes.find(
(type) => type.id === history.timer_type
)?.timer_type.capitalize
All you're doing is simply appending the name of the function to a value somewhere. But your function isn't defined as being a part of any given class or type (as opposed to the find function also used on this line of code, which is defined on the Array type). And even if it was, you're still not invoking that function (as you already do with the find function here).
Your function is just a plain function. It is invoked directly and passed a value. So you would invoke it directly, and pass it a value:
capitalize(timerTypes.find(
(type) => type.id === history.timer_type
)?.timer_type)
For more practice and information on how to define and use functions in JavaScript, you are highly encouraged to start with some introductory tutorials on the JavaScript language. Building a React application is a fairly advanced topic as an introduction to the basic syntax and structure of the language itself.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论