Блог

Привет, я хочу добавить цвет только к определенной части текста в элементе 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>
    );
} 
  

Из приведенного выше кода каждый случай передает текстовый реквизит дочернему компоненту ListItem. В текстовом реквизите я хочу имя и item.name быть в синих тонах.
text={name
‘прокомментированный элемент’ item.name }
как я могу это сделать? может ли кто-нибудь помочь мне с этим. Спасибо.

Измените значение 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>
  );
} 
  

Что вы хотите, так это передать компонент вместо строки в тексте.

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

Кроме того, код немного сложно отслеживать. Вместо идентификатора оператора switch сделайте что-то вроде

 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" amp;amp; <div className="image">
      <Image
          width={70}
          height={70}
          item_id={item.id}
      />
  </div>}
</ListItem>
)