组件 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

  lineContent={

    <>

      Text for <span>line</span> one

    </>

  }

/>