时间戳

首页 > 解决方案 > 在 React 类组件内部渲染常量

reactjs - 在 React 类组件内部渲染常量

问题描述

我有一个关于在 React 类组件中使用常量呈现内容的方式的快速问题。所以下面的代码可以正常工作（使用 map 函数渲染一个常量）：

class App extends React.Component {

array = [
   {
      name: "Sarah",
      age: 27
   },
   {
      name: "Sam",
      age: 35
   }
 ]

render() {
  const output = this.array.map(elem => (
      <div>
        <p>{elem.name}</p>
        <p>{elem.age}</p>
      </div>
  ));
    return (
      <div>{output}</div>
    );
  }
}

但是，以下会产生一个空白页面（我只是定义一个返回 div 并尝试呈现它的常量）：

class App extends React.Component {

  render() {
    const Output = () => (
        <div>Hello</div>
    );
    return (
      <div>{Output}</div>
    );
  }
}

但是，如果我使用角括号而不是花括号，则几乎相同的代码可以工作：

class App extends React.Component {
  render() {
    const Output = () => (
      <div>Hello</div>
    )
    return (
      <div>
        <Output />
      </div>
    )
  }
}

所以看起来这与花括号和尖括号有关。花括号在我使用 map 函数时起作用，但当我在渲染方法中定义一个返回 div 的常量并尝试直接渲染它时不起作用。然后当我使用尖括号时它再次起作用......这有点奇怪。我知道这远非最重要的事情，我只是想弄清楚这一点。先感谢您！

标签： reactjsconstantsrendering

解决方案

class App extends React.Component {

  render() {
    const Output = () => (
        <div>Hello</div>
    );
    return (
      <div>{Output()}</div>
    );
  }
}

如果您尝试调用函数 Output() 它将返回 JSX 但按照本文他们不建议这样做

推荐阅读