css - 如何在 react 中为跨度元素中文本的特定部分添加颜色？

Question

您好，我只想为 span 元素中文本的特定部分添加颜色。我将此文本作为 Prop 传递给子组件，但我不确定该怎么做。

下面是代码，

switch(notification.type) {
case 'uploaded':
    return (
        <ListItem icon={<Svg/>} text={name + 
            'created item' + item.name} timestamp={timestamp}>
            <div className="image">
                <Image
                    width={70}
                    height={70}
                    item_id={item.id}
                />
            </div>
       </ListItem>
    );
case 'comment':
    return (
        <ListItem icon={<Svg/>} text={name + 
            'commented item' + item.name} ref={this.comment_ref} 
            className="span" timestamp= {timestamp}>
        </ListItem>
    );

function ListItem(props) {
    return (
        <li className="item">
            <div className="details">
                {props.icon}
                <span ref={props.ref} className={props.className}> 
                    {props.text} 
                </span>
             </div>
             {props.children}
             <Timestamp>{props.timestamp}</Timestamp>
        </li>
    );
} 

从上面的代码来看，每个案例都是将 text prop 传递给子组件 ListItem。在文本 Prop 中，我希望 name 和 item.name 为蓝色。 text={名字 + '评论元素' + item.name} 我该怎么做？有人可以帮我解决这个问题吗？谢谢。

Answer 1

将 text 属性的值改造成一个对象，其中包含您需要以不同方式设置样式的 3 个部分:

<ListItem
  icon={<Svg/>}
  // text is now an object, contains data however you want to pass it in
  text={{
    name: name,
    commentedItem: commentedItem
    itemName: item.name
  }}
  ref={this.comment_ref} 
  className="span"
  timestamp= {timestamp}>
</ListItem>

然后在您的 ListItem 组件中，您可以使用标记输出它们，让您可以根据需要设置它们的样式:

function ListItem(props) {
  return (
    <li className="item">
        <div className="details">
            {props.icon}
            <span ref={props.ref} className={props.className}>

              <span className="blue-text">{props.text.name}</span>
              <span>{props.text.commentedItem}</span>
              <span className="blue-text">{props.text.itemName}</span>

            </span>
         </div>
         {props.children}
         <Timestamp>{props.timestamp}</Timestamp>
    </li>
  );
}