组件 JSX 属性中的 HTML 标记

Question

我不确定 React 元素的一些术语，所以如果我说错了请原谅。

我的问题

我已经在我的 React 网络应用程序中设置了这个组件。

const Title = ({lineContent}) => {

  let line1 = useRef(null);

  return (

    <h1 className="page-title">

      <div ref={el => line1 = el} className="line">

        {lineContent}

      </div>

    </h1>

  )

  

  };

我将它拉到父组件：

<Title lineContent="Text for line one"/>

我想<span>在属性中用一个词包裹起来lineContent=""，这样我就可以改变它的颜色。

<Title lineContent="Text for <span>line</span> one"/>

但它目前呈现出<span>标签，就好像它是标准文本一样。

有什么方法可以设置它以便将其<span>识别为 HTML，以便我可以在 css 中设置样式吗？任何方向将不胜感激！

Answer 1

是的，只需传递元素本身而不是字符串：<Title&nbsp; lineContent={&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; Text for <span>line</span> one&nbsp; &nbsp; </>&nbsp; }/>