javascript - 反应中高阶组件的问题

Question

我正在学习如何使用高阶组件。在那里我想突出显示一些文本。在我的代码中，我可以使用<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;

标签： javascriptreactjs

Answer 1

问题

1. 您的 HOC 看起来正试图从基于类的组件的 render 方法返回一个功能组件。
2. 道具没有正确传播。
3. padding: 2可能无效，它可能应该提供一个单位，无论您需要什么

解决方案

要修复突出显示，我相信您只需要为display: inline-block;div 指定一个 CSS 规则。从基于类的组件传播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;
};