Reactjs：如何将HTML放入列表项的primaryText中？

我希望列表项中有一个跨度，如下所示：

<ListItem
    primaryText={"<span class='inner'>Some important info</span>" + item.title}
/>

呈现时，我不会得到HTML span元素，而是列表项的某个重要信息标题的文本。如何使HTML呈现为HTML？

删除

span

周围的

“

”，因为当您使用

“

时，它将转换为

字符串

，而不会被视为

HTML

标记

这样写：

primaryText={<div>
                <span className='inner'>Some important info</span>
                {item.title}
            </div>}

primaryText={
一些重要信息
{item.title}
}

---

注意：

类

是保留关键字，因此，要应用

css

类，请使用。

编辑：忽略我，刚刚看到您专门为

列表项

使用它

如果需要在元素中呈现HTML，可以使用

DangerouslySetinerHTML

prop（但它会带来一些风险，顾名思义）：

函数createMarkup（）{
返回{uuuhtml:'First·；Second'}；
}
函数MyComponent（）{
返回；
}

此处的文档：

---

根据给出的信息，您应该将范围移动到ListItem组件中，并在那里处理它，而不是传递道具

<ListItem
  primaryText={ 'Some important info' } 
  title={ item.title }
/>

  //List Item Component
import React from 'react'

const ListItem = ( props ) => {

  return (
    <li>
      <span className='inner'>{ props.primaryText }</span>{ ` ${props.title}` }
    </li>
  )
}

export default ListItem

//列表项组件
从“React”导入React
常量列表项=（道具）=>{
返回(

{props.primaryText}{${props.title}}

)
}
导出默认列表项

工作很有魅力！谢谢！

<ListItem
  primaryText={ 'Some important info' } 
  title={ item.title }
/>

  //List Item Component
import React from 'react'

const ListItem = ( props ) => {

  return (
    <li>
      <span className='inner'>{ props.primaryText }</span>{ ` ${props.title}` }
    </li>
  )
}

export default ListItem