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

Question

我想在 ListItem 中有一个跨度，如下所示：

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

渲染时，我没有得到 HTML 跨度元素，而是文本 <span class='inner'>Some important info</span>Title of the list item。如何使 HTML 呈现为 HTML?

Answer 1

去掉span周围的""，因为当你使用"时，它会被转换成string，不会被当成html标签。

这样写：

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

注意： class 是保留关键字，所以要应用 css 类使用 className.

Answer 2

编辑：忽略我，只是看到你需要它专门用于 ListItem

如果你需要在一个元素中渲染 HTML，你可以使用 dangerouslySetInnerHTML 属性（但它有一些风险，顾名思义）：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

文档在这里： https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 3

根据给定的信息，您应该将 span 移到 ListItem 组件中并在那里处理它，而不是传入 props。

<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

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

Reactjs: How to put HTML into primaryText of a list item?

html

listitem

reactjs

material-ui