Как я могу поставить смешанный элемент для компонента?

Question

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

Как мне лучше очистить этот код, чтобы мне не нужно было экранировать <code>/oauth/authorize в смешанном массиве?

Я пытался экранировать его с синтаксисом {``}, но предоставив описание prop в виде {`Query parameters for ${<code>/oauth/authorize} в коде авторизации`` * просто отображается как «Параметры запроса для [объекта объекта] в код авторизации ".

Есть идеи?

Answer 1

Это один из способов:

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 2

Вы также можете использовать свойство 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>

Answer 3

Это результат, который вы искали?

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>. Не нужно убегать.