reactjs React中高阶构件实现的问题及构件逻辑的重用和抽象

ufj5ltwl 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(162)

你好我的代码失败了我正在使用withLoadingIndicator HOC用于向MyComponent组件添加加载指示符。HOC将MyComponent组件作为参数，并返回一个添加加载指示符的新组件。这是正确的还是我遗漏了什么？

function withLoadingIndicator(Component) {
  return function WithLoadingIndicator(props) {
    if (props.isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

const MyComponentWithLoadingIndicator = withLoadingIndicator(MyComponent);

export default MyComponentWithLoadingIndicator;

reactjs

来源：https://stackoverflow.com/questions/75439512/problems-to-implement-higher-order-components-hocs-in-react-to-reuse-and-abstr

1条答案

按热度按时间

tkclm6bt1#

看起来您没有在运行时将任何 prop 传递到组件中。您可以：

- 1）将isLoading属性传递给组件：**

<MyComponentWithLoadingIndicator isLoading={false} />

- 2）将 prop 设为可选：**

变更：

if (props.isLoading) { .. }

收件人：

if (props?.isLoading) { .. }

- 3）或提供默认值：**

function withLoadingIndicator(Component) {
  return function WithLoadingIndicator(props = {isLoading: false}) {
    if (props.isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props} />;
  };
}

或者使用defaultProps，在组件声明后添加以下内容：

MyComponentWithLoadingIndicator.defaultProps = { isLoading: false };

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs React中高阶构件实现的问题及构件逻辑的重用和抽象

1条答案

相关问题

热门标签

最新问答