如何在反应中为 span 元素中文本的特定部分添加颜色？答案

【问题标题】：How to add color to specific part of text in span element in react?如何在反应中为 span 元素中文本的特定部分添加颜色？
【发布时间】：2019-04-11 14:16:02
【问题描述】：

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

下面是代码，

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。在文本道具中，我希望名称和 item.name 为蓝色。 text={姓名 + '评论项目' + item.name} 我该怎么做？有人可以帮我解决这个问题。谢谢。

【问题讨论】：

标签： css reactjs

【解决方案1】：

将text prop 的值修改为一个对象，其中包含您需要设置不同样式的 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>
  );
}

【讨论】：

【解决方案2】：

你想要的是传递一个组件而不是文本中的字符串。

text={<span>
    <span className="blue">{name}</span> commented item <span className="blue">{item.name}</span>
</span>}

此外，代码有点难以跟踪。而不是 switch 语句 Id 做类似的事情

const Text= ({name, itemName }) => <span>
  <span className="blue">{name}</span> commented item <span className="blue">{item.name}</span>
</span>;


const ListItemComponent = ({name, item, timestamp, notification}) => (
<ListItem
  icon={<Svg/>}
  text={<Text name={name} itemName={item.name} /> }
  timestamp={timestamp}>
  {notification.type === "uploaded" && <div className="image">
      <Image
          width={70}
          height={70}
          item_id={item.id}
      />
  </div>}
</ListItem>
)

【讨论】：