Question

有时候，我都看过并写过一些像这样的React代码。

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

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

我知道我不能以这种方式使用道具，但如果我所做的只是渲染像段落一样简单，我不明白为什么我需要将其作为功能组件或扩展{{1} }

我目前的原因是因为我需要传入一个或两个段落作为占位符文本而我不能只传入纯文本。

Answer 1

这不是反应组件，它只是存储JSX的变量：

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

根据DOC：

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

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

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

props仅在 React组件中提供，可以在Functional Component或基于类的组件中使用。

如果它不是反应成分，为什么需要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 "
);

Answer 2

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

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