Question

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

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

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

Answer 1

编辑：忽略我，只是看到你需要专门用于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 2

根据给出的信息，你应该在ListItem组件中移动span并在那里处理它而不是传入道具。

<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

Answer 3

移除""周围的span，因为当您使用"时，它会转换为string，不会被视为html标记。

这样写：

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

注意： class是保留关键字，因此，要应用css课程，请使用className。

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

3 个答案: