reactjs - 我们可以在花括号内执行表达式，我们在 react 中传递 props 值吗

Question

在以下代码的上下文中，我知道我可以在大括号内传递 prop 值，但我也可以在其中执行表达式吗？

import React from 'react';
import ReactDOM from 'react-dom';

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}</h1>;
  }
}

ReactDOM.render(
  <Greeting firstName='My name' />, 
  document.getElementById('app')
);

Answer 1

是 , 任何有效的 JavaScript 表达式都可以放在花括号内。花括号是特殊字符，告诉解析器里面有 JavaScript 代码，并以此方式运行它。因此，您可以在其中运行任何 JavaScript 表达式，并且会在返回结果 HTML 之前对其进行评估。
例如，在下面的代码中，在返回整个元素之前，花括号内的表达式将被评估为 JavaScript。

return <h1>{ this.props.value * 10 }</h1>