[英]Add style to specific part of string in an Object prop in ReactJS
Here, the desc
key has a value which is a string;这里, desc
键的值是一个字符串;
const kataData = {
name: "Katarina",
img: "https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg",
desc: "The Sinister Blade, Passive: Voracity",
};
This is passed as a prop to my React component as so:这作为道具传递给我的 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>
);
}
So here, kataData.desc
is set to pass the string directly to my component and the text shows up as expected on my site.所以在这里, kataData.desc
设置为将字符串直接传递给我的组件,并且文本按预期显示在我的网站上。
What i can't seem to find out is how to change certain Html elements inside this string, for example, making a section of the string bold like so:我似乎无法找到的是如何更改此字符串中的某些 Html 元素,例如,将字符串的一部分设为粗体,如下所示:
desc: "The Sinister Blade, <b> Passive: </b> Voracity"
any tag (like the <b>
) directly translates as plain text and I seem can't figure out how to separate a section of the string out to make changes the I normally would with a <span>
tag.任何标签(如<b>
)直接转换为纯文本,我似乎无法弄清楚如何将字符串的一部分分开来进行更改,我通常会使用<span>
标签。
any help is appreciated, thanks in advance任何帮助表示赞赏,在此先感谢
You can make use of innerHTML
to display the strings HTML.您可以使用innerHTML
来显示字符串 HTML。
<p>
tag:更改<p>
标签:<p id="champ_desc"></p>
function _renderDesc(){
let _ele = document.getElementById('champ_desc');
_ele.innerHTML = desc;
}
componentDidMount
or by using useEffect:在componentDidMount
上或使用 useEffect 调用此 function:useEffect(() => {
_renderDesc();
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.