如何让 React 应用程序在作为 prop 传递时将 api 数据显示为 html 而不是字符串

Question

我正在尝试显示从菜谱 API 获得的文本块，该文本包括粗体标签和链接等 html 元素，但被包装在字符串中，因此它显示文字文本当前文本

我需要它来将文本显示为 jsx 而不是字符串

我通过 props 传递 api 数据

const RecipeDetail = ({ recipeDetail }) => { const { image, analyzedInstructions, extendedIngredients, instructions, summary, title } = recipeDetail;

我正在尝试使用摘要，我也在使用材料 ui

<Stack gap={4} sx={{ backgroundColor:'grey', borderRadius: '12px'}}> <Typography sx={{ borderBottom: 'solid red', marginRight: 'auto'}} variant='h4'> Summary </Typography> <Typography paragraph="true" align='justify' gutterBottom='true' variant='body1' sx={{ lineHeight: '2rem' }}> {summary} </Typography> </Stack>

正如你所看到的，我将摘要作为道具传递，因为它会根据选择的食谱而变化

, 那么我如何阻止摘要作为字符串传入

我通过传入 jsx 作为摘要来获得所需的版本所需的文本代码但摘要不会根据选择的配方而改变

Answer 1

您应该在版式上使用

dangerouslySetInnerHTML

属性，如下所示：

<Typography dangerouslySetInnerHTML={{ __html: summary }}></Typography>

这里是关于它的React文档

Answer 2

使用 npm 包“html-react-parser”