Как я могу добавить в компонент смешанный элемент?
<GuideTable
description = {['Query parameters for ', <code>/oauth/authorize</code>, ' in the authorization code grant']} />
Как мне лучше очистить этот код, чтобы мне не нужно было экранировать <code>/oauth/authorize</code> в смешанном массиве?
Я попытался избежать этого с помощью синтаксиса {``}, но предоставив свойство description, поскольку {`Query parameters for ${<code>/oauth/authorize</code>} in the authorization code grant`} просто отображается как «Параметры запроса для [object Object] в предоставлении кода авторизации».
Любые идеи?
@GabrielePetrioli Я хочу, чтобы элемент кода в предложении отображался как элемент кода.
Итак, как вы визуализируете свойство description внутри GuideTable?
{this.props.description}
Ответы 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>. Побег не нужен.
Я больше ищу решение, в котором мне не нужно предоставлять смешанный массив в качестве опоры description. У нас их много в нашей кодовой базе, и сейчас это проблема, связанная с ремонтопригодностью.
Это один способ:
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</>}/>
Это переходит во фрагмент для описания.
О, как интересно, я понятия не имел о фрагментах. У нас все еще версия 15.6. *, Но мы хотели немного обновить ее. Это будет отлично работать. Спасибо!
Вы также можете использовать свойство опасноSetInnerHTML, которое является заменой реакции для 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>
Так что именно вы хотите вывести?