如何在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>

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

• 上升：您仍会在React调试工具中看到<MyComponent>标记。

• 缺点：如果您正在使用Typescript或Flow，您的转换器可能会抱怨，因为MyComponent的返回类型仍然是React元素（React.ReactElement）。

Answer 2

差异是<p>是一个html元素，而MyComponent是一个React组件。

React组件需要呈现/返回 单个组件或单个html元素。

'Hello'既不是。

Answer 3

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

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

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

Answer 4

  

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

source

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

您可以传递已经包含HTML元素的字符串（就像您在示例中所做的那样），也可以将字符串包装在＆＃34; MyComponent＆＃34;中的HTML元素中。像这样

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

Answer 5

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

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