Я учусь использовать компоненты более высокого порядка. Там я хочу выделить некоторый текст. В моем коде я могу выделить всю строку с помощью <div> . Проблема в том, что я хочу выделить только часть текста. Итак, я попробовал <span> . Но когда я использую span, вся часть выделения не работает. Поскольку он не выдает никаких ошибок, я не могу понять, откуда берется ошибка.

HighlightedText.js

 import React, { Component } from 'react';
import UpdatedComponent from './Hoc';

class HighlightedText extends Component {
    render() {
        return <h1>Highlighted Text</h1>
    }
}



export default UpdatedComponent(HighlightedText);
  

Hoc.js

 const UpdatedComponent = OriginalComponent => {
    class NewComponent extends React.Component {

        render() {
            return(props) =>(
                <div style={{ background: 'Yellow', padding: 2 }}>

                    <OriginalComponent {...props}/>

                </div>
            )
        }
    }

    return NewComponent;
}

export default UpdatedComponent;
  

Проблемы

1. Похоже, что ваш HOC пытается вернуть функциональный компонент из метода визуализации компонента на основе классов.
2. Реквизиты распределены неправильно.
3. padding: 2 может быть недопустимым, вероятно, он должен предоставить модуль, все, что вам нужно

Решение

Чтобы исправить выделение, я полагаю, вам просто нужно указать display: inline-block; правило CSS для div. Распространение this.props от компонента на основе классов к обернутому компоненту.

 const updatedComponent = (OriginalComponent) => {
  class NewComponent extends React.Component {
    render() {
      return (
        <div
          style={{
            background: "Yellow",
            padding: "1rem", // <-- provide unit, 1rem ~ 16px
            display: "inline-block" // <-- inline-block display
          }}
        >
          <OriginalComponent {...this.props} />
        </div>
      );
    }
  }

  return NewComponent;
};
  

Если вы хотите выделить только часть текста, для этого требуется изменить виртуальное дерево DOM, возвращаемое исходным компонентом, поскольку вы не можете просто обернуть его, как в вашем примере. Возможно, вы захотите использовать react-string-replace для достижения этой цели.