Question

嗨，我想仅在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>
    );
}

从以上代码中，每种情况都将文本prop传递给子组件ListItem。在文本属性中，我希望名称和item.name为蓝色。文字= {名称 + '评论的项目'+ item.name } 我该怎么做？有人可以帮我吗谢谢。

Answer 1

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

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>
)

Answer 2

将text属性的值重新设置为一个对象，其中包含您需要使用三种不同样式的样式：

<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>
  );
}

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

2 个答案: