没有函数或类的反应组件？答案

【问题标题】：React Component without Function or Class?没有函数或类的反应组件？
【发布时间】：2017-10-31 10:13:19
【问题描述】：

有时，我既见过也写过一些这样的 React 代码。

const text = (
  <p>
    Some text
  </p>
);

这确实有效，但是这有什么问题吗？

我知道我不能以这种方式使用 props，但如果我所做的只是渲染一些简单的东西，比如一个段落，我不明白为什么我需要让它成为一个功能组件或扩展 React.Component

我目前这样做的原因是因为我需要传入一两段作为占位符文本，而不能只传入纯文本。

【问题讨论】：

【解决方案1】：

这不是 react 组件，它只是一个变量，其中存储了JSX：

const text = (
   <p>
      Some text
   </p>
);

根据DOC：

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是string也不是HTML。

它被称为 JSX，它是 JavaScript 的语法扩展。我们建议将它与 React 一起使用来描述 UI 的外观喜欢。 JSX 可能会让您想起模板语言，但它带有 JavaScript 的全部功能。

props 将仅在 React 组件 中可用，无论是在功能组件中还是在基于类的组件中。

如果不是 React 组件，为什么这里需要 React？

我们可以将 JSX 存储在任何变量中，它会被babel 转译，并转换为React.createElement。

根据DOC：

JSX 只是为 React.createElement() 提供语法糖函数。

由于 JSX 编译为对 React.createElement 的调用，因此 React 库也必须始终在您的 JSX 代码范围内。

例子：当我们写的时候：

var a = <div> Hello </div>

Result 这将是：

var a = React.createElement(
  "div",
  null,
  " Hello "
);

【讨论】：

【解决方案2】：

这段代码只是将一个带有文本的段落元素存储到变量text中。它不是一个组件，功能或其他。像使用标准 Javascript 一样在 React 组件中使用它：

render() {
    return (
        <div className="some-text">
            { text }
        </div>
    );
}

【讨论】：