如何在React组件中将字符串呈现为子项？

Question

拿一个简单的组件：

function MyComponent({ children }) {
  return children;
}

这有效：

ReactDOM.render(<MyComponent><span>Hello</span></MyComponent>, document.getElementById('stage'));

但这没有（我删除了<span/> ）：

ReactDOM.render(<MyComponent>Hello</MyComponent>, document.getElementById('stage'));

因为React尝试在字符串上调用render ：

Uncaught TypeError: inst.render is not a function

另一方面，这很好用：

ReactDOM.render(<p>Hello</p>, document.getElementById('stage'));

如何使<MyComponent/>表现得像<p/> ？

Answer 1

如果您使用的是React 16.2或更高版本，则可以使用React片段执行此操作：

const MyComponent = ({children}) => <>{children}</>

如果您的编辑器不支持片段语法，这也将起作用：

const MyComponent = ({children}) =>
    <React.Fragment>{children}</React.Fragment>

请记住，就React而言，您仍在创建和返回组件（MyComponent类型） - 它只是不创建额外的DOM标记。 这是一个混合包：

好处：你仍会在React Debug Tools中看到<MyComponent>标签。
缺点：如果您正在使用Typescript或Flow，您的转换器可能会抱怨，因为MyComponent的返回类型仍然是React元素（React.ReactElement）。

Answer 2

差别是<p>是一个html元素而MyComponent是一个React Component。

反应的组分需要渲染/ 返回一个单个部件或一个单一的HTML元素。

'Hello'既不是。

Answer 3

您至少需要一个顶级HTML元素。 您的组件实际上不能只输出字符串，这不是React的工作方式。

最简单的解决方案是简单地让MyComponent在span或div中包装它的输出。

function MyComponent({ children }) {
  return <span>{ children }</span>;
}

Answer 4

目前，在组件的渲染中，您只能返回一个节点; 如果你有一个要返回的div列表，你必须将你的组件包装在div，span或任何其他组件中。

你要返回的不是根节点。 您正在返回一个react组件，它返回一个字符串，它应该返回一个HTML元素。

您可以传递已经用HTML元素包装的字符串（就像您在示例中所做的那样），也可以将字符串包装在“MyComponent”中的HTML元素中，就像这样

function MyComponent({ children }) {
  return <span>{ children }</span>;
}

Answer 5

React可以呈现React组件（类）或HTML标签（字符串）。 任何HTML标记按惯例都是小写的，其中Component是大写的。 每个React组件都必须只呈现一个Tag（或null）。 回答你的问题：你做不到。

在上面的示例中，您将呈现使用children属性给出的内容，其中这将在内部呈现标记或无效的字符串。