Question

我的反应网络应用程序有一个页面组件。页面组件执行子组件的异步调用。现在我必须在每一页上都这样做

export default class Page extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        loading: true
    }
}


componentWillMount = async () => {
    // ... do calls 

    this.setState({
        loading: false
    })
}


render () {
    if (this.state.loading) {
        return <Loading/>
    } else {
        return (
            // Some other components that needs the information from the calls 
        )
    }

}
}

有没有办法减少样板？我正在使用ReactJS查看高阶组件。我想可能是一个组件，它将获得需要进行调用的函数和一个呈现函数的组件。

const loader = (calls) => (WrappedComponent) => {
    return class Loader extends React.Component {

        constructor (props) {
            super(props);
            this.state = {
                loading: true
            }
        }

        componentWillMount = () => {
            // execute calls function
        };

        render () {
            return this.state.loading ? <Loading/> : <WrappedComponent {... this.props }/>
        }
    }

};

export default loader;

但是我还没有找到一种方法将调用函数传递给loader函数。

Answer 1

当然可以使用HOC来完成。

假设您的功能符合

的要求

const yourFunction = () => {
  return 'A value';
}

然后你可以简单地将它作为第二个参数传递给你的HOC：

const loader = (WrappedComponent, someFunction) => {
    return class Loader extends React.Component {

        constructor (props) {
            super(props);
            this.state = {
                loading: true,
                value: '',
            }
        }

        componentWillMount = () => {
            // execute the function you passed it
            this.setState({value: yourFunction()});
        };

        render () {
            const { loading, value } = this.state;
            return loading ? <Loading/> : <WrappedComponent value={value} />
        }
    }

};

然后用它包装你的组件：

const EnhancedComponent = Loader(WrappedComponent, yourFunction);

或者，您可以将您的HOC包装在另一个HOC中以传递类似的东西..

React - 在每个组件上加载组件

1 个答案: