Question

<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]的查询参数”。 / p>

有什么想法吗？

Answer 1

这是您想要的结果吗？

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>元素。无需转义。

Answer 2

这是一种方式：

const GuideTable = (props) => {
    return (<div>
        {props.description}
        <div>My other stuff in Guide Table</div>
    </div>);
};
<GuideTable description={<>Query parameters for <code>/oauth/authorize</code> in the authorization code grant</>}/>

这将传递一个片段作为描述。

Answer 3

您还可以使用dangerouslySetInnerHTML属性，它是innerHTML的替换。

const App = () => (
  <GuideTable
    description='Query parameters for <code>/oauth/authorize</code>, in the authorization code grant' />
);

const GuideTable = ({description}) => (
  <div dangerouslySetInnerHTML={{__html:description}}></div>
);

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>

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

3 个答案: