如何使用高阶组件向组件添加按钮？我尝试了此操作，但未在组件内部添加按钮。将其添加到原始组件之前。
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>
尝试使用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;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句