Question

如何使用高阶组件向组件添加按钮？我尝试了此操作，但未在组件内部添加按钮。将其添加到原始组件之前。

const withButton = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Fragment>
          <button>BUTTON ADDED USING HOC</button>
          <WrappedComponent {...this.props} />
        </Fragment>
      )
    }
  }
}
export default withButton

当我这样呼叫HOF时

const ComponentWithButton = withButton(WrappedComponent)

ComponentWithButton添加了按钮，但在WrappedComponent之前添加了按钮，而我想在其中将按钮添加为WrappedComponent的子元素。

让我们说WrappedComponent正在渲染类似的东西

<div className="baseClass">{other divs and layout}</div>

const ComponentWithButton = withButton（WrappedComponent）

ComponentWithButton应该呈现以下内容

<div className="baseClass">
<button>BUTTON ADDED USING HOC</button>
{other divs and layout}
</div>

Answer 1

如果要动态地将按钮放置在WrappedComponent内部，可以尝试类似的操作。

const withButton = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Fragment>
          <WrappedComponent {...this.props}>
            <button>BUTTON ADDED USING HOC</button>
          </WrappedCompnent>
        </Fragment>
      )
    }
  }
}
export default withButton

现在，在包装好的组件中，您可以将按钮放置在任意位置，因为该按钮可以作为WrappedComponent的子属性访问。

const WrappedComponent = ({ children, ...otherProps }) => (
  <div className="baseClass">
    {children}
    {renderOtherDivsAndProps(otherProps)}
  </div>
);

希望这对您有帮助

Answer 2

尝试使用props.children，另请参阅React.Children API

function ComponentWithButton({ children }) {
  return (
    <>
      <button>BUTTON ADDED USING HOC</button>
      {children}
    </>
  );
}

然后渲染：

<ComponentWithButton>
  <WrappedComponent />
</ComponentWithButton>

使用课程：

class ComponentWithButton extends Component {
  render() {
    const { children } = this.props;
    return (
      <>
        <button>BUTTON ADDED USING HOC</button>
        {children}
      </>
    );
  }
}
export default ComponentWithButton;

Answer 3

我尝试了这个，我得到了想要的东西。

<link rel="stylesheet" type="text/css"

如何在reactjs中使用高阶组件添加按钮

3 个答案: