在 ReactJS 的 Object 道具中为字符串的特定部分添加样式

Question

这里，desc键有一个字符串值；

const kataData = {
  name: "Katarina",
  img: "https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg",
  desc: "The Sinister Blade, Passive: Voracity",
};

这是作为道具传递给我的 React 组件的：

// component to hold vars
const Champ = (props) => {
  const {name, img, desc} = props;
  return (
    <div className="SmartApp">
      <h2>{name}</h2>
      <img src={img} alt={name} style={{width: "300px"}} />
       
      // here {desc} = props.desc
      <p>{desc}</p>


    </div>
  );
};

// main App
export default function ChampApp() {
  return (
    <div className="App">
      <h1>Champs Ranked</h1>
      <Champ name={kataData.name} img={kataData.img} desc={kataData.desc} />
    </div>
  );
}

所以在这里，kataData.desc 设置为将字符串直接传递到我的组件，并且文本按预期显示在我的网站上。

我似乎无法找到的是如何更改此字符串中的某些 Html 元素，例如，将字符串的一部分设为粗体，如下所示：

desc: "The Sinister Blade, <b> Passive: </b> Voracity"

任何标签（如 <b>）直接翻译为纯文本，我似乎无法弄清楚如何将字符串的一部分分开以进行我通常使用 [=16 进行的更改=] 标签。

感谢任何帮助，提前致谢

Answer 1

您可以使用 innerHTML 来显示字符串 HTML。

更改<p>标签：

<p id="champ_desc"></p>

创建函数插入 HTML:

function _renderDesc(){
  let _ele = document.getElementById('champ_desc');
  _ele.innerHTML = desc;
}

在 componentDidMount 上或使用 useEffect:

useEffect(() => {
  _renderDesc();
}, []);

在 ReactJS 的 Object 道具中为字符串的特定部分添加样式

Add style to specific part of string in an Object prop in ReactJS

javascript

components

object

reactjs

react-props