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

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

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

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