Javascript react中高阶分量的问题

我正在学习如何使用高阶组件。在这里，我想突出显示一些文本。在我的代码中，我可以使用

突出显示整行。问题是我只想强调文本的一部分。所以我尝试了

。但是当我使用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);

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;

import React，{Component}来自'React'；
从“/Hoc”导入更新的组件；
类HighlightedText扩展组件{
render（）{
返回突出显示的文本
}
}
导出默认更新组件（HighlightedText）；

Hoc.js

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

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



export default UpdatedComponent(HighlightedText);

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;

const UpdatedComponent=OriginalComponent=>{
类NewcomComponent扩展了React.Component{
render（）{
返回（道具）=>(
)
}
}
返回新组件；
}
导出默认更新组件；

如果只想突出显示文本的一部分，则需要修改原始组件返回的虚拟DOM树，因为不能像示例中那样轻松地包装它。您可能希望使用来实现这一点。

问题

您的HOC似乎正在尝试从基于类的组件的呈现方法返回功能组件

道具传播不正确

padding:2

可能无效，它可能会提供一个单元，无论您需要什么

解决方案 要修复突出显示，我相信您只需要指定一个

display:inline块

CSS规则到div.Spread

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

const updatedComponent=（OriginalComponent）=>{
类NewcomComponent扩展了React.Component{
render（）{
返回(
@MalshaMadushaniKalahewaththa太棒了！如果您发现解决方案和解释很有帮助，请也投票。干杯。