javascript - 如何在 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 标记。您仍然会看到 <MyComponent> React Debug Tools 中的标签，MyComponent 的返回类型仍然是一个 React 元素 (React.ReactElement)。