时间戳

首页 > 解决方案 > 如何为组件提供混合元素？

reactjs - 如何为组件提供混合元素？

问题描述

<GuideTable
  description={['Query parameters for ', <code>/oauth/authorize</code>, ' in the authorization code grant']} />

我怎样才能更好地清理这段代码，这样我就不需要<code>/oauth/authorize</code>在混合数组中转义了？

我尝试使用{``}语法对其进行转义，但提供的描述道具{`Query parameters for ${<code>/oauth/authorize</code>} in the authorization code grant`}只是呈现为“授权代码授予中 [object Object] 的查询参数”。

有任何想法吗？

标签： reactjsjsx

解决方案

这是你要找的结果吗？

const App = () => (
  <GuideTable
    description={['Query parameters for ', <code>/oauth/authorize</code>, ' in the authorization code grant']}
  />
);

const GuideTable = ({description}) => (
  description.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)
);

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.development.js"></script>
<div id="app"></div>

这将向 DOM 渲染两个文本节点和一个<code>元素。不需要逃避。

推荐阅读