如何在reactjs中呈现字符串

Question

我有一个带键和值的对象。我想在我的反应JSX标记中呈现某个键值，如下所示：

const VALUES = {
  "key1": "value 1",
  "key2": "value 2",
}

const MyComponent = ({name}) => (
  VALUES[name] || ""  
)

但这不起作用。虽然直接在JSX中呈现字符串是合法的，但是：<span>A string</span>上面的代码失败并出现错误，说明＆＃34; inst.render不是函数＆＃34;在_renderValidatedComponentWithoutOwnerOrContext。

如果值看起来像这样：

const VALUES = {
  "key1": <span>value 1</span>,
  "key2": <span>value 2</span>,
}

Answer 1

我要走出困境并假设这是因为const MyComponent的签名为() => string而非() => ReactElement;发生此错误是因为React试图在函数的返回值上调用.render()并且找不到它，因此它会中断。

确实，would appear组件render()只能返回ReactElement | null | false。鉴于在无状态组件中，函数本身是render()函数，从逻辑上讲，您的组件必须具有签名() => ReactElement | null | false。