Question

我有一个简单的类如下，为了这个例子，只显示从Firebase加载的列表的长度。

class Companies extends Component {
  constructor() {
    super();
    this.state = {
      companies: [],    
      loading: true
    };

    this.firebase = new FirebaseList('companies');    
  }

  componentDidMount() {
    const previousCompanies = this.state.companies;

    this.firebase.databaseSnapshot('companies').then((snap) => {
      if (snap.val() === null) {
        this.setState({loading: false})
      }
    });

    this.firebase.database.on('child_added', snap => {
      previousCompanies.push({
        id: snap.key,
        ...snap.val()
      });

      this.setState({
        companies: previousCompanies,
        loading: false
      })
    });

    this.firebase.database.on('child_changed', snap => {
      const updatedCompanies = updatedItems(this.state.companies, this.state.currentCompany);
      this.setState({
        companies: updatedCompanies
      })
    });

    this.firebase.database.on('child_removed', snap => {
      const updatedCompanies = removeItem(previousCompanies, snap.key);
      this.setState({
        companies: updatedCompanies
      })
    })
  }



  render() { 
    return (
      <div>
       {this.state.companies.length}       
      </div>
    );
  }
}

export default WithLoader('companies')(Companies);

这是我经常重复的模式，所以我想在高阶组件中构建一个Loader，以便在从数据库中提取数据时显示Loader动画。

我正在使用以下代码：

const WithLoader = (propName) => (WrappedComponent) => {
  return class WithLoader extends Component {


    componentDidMount() {
      console.log(this.props)
    }

    isEmpty(prop) {
      return (
        prop === null ||
        prop === undefined ||
        (prop.hasOwnProperty('length') && prop.length === 0) ||
        (prop.constructor === Object && Object.keys(prop).length === 0)
      )
    }

    render() {
      return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComponent {...this.props}/>
    }

  }
};

export default WithLoader;

我正在尝试从我的高阶组件中的公司组件状态访问公司。但是，当我在高阶组件中的console.log（this.props）时，我只获得历史，匹配和位置道具。

我做错了什么？

Answer 1

由于withLoader是HOC，因此首先将withCompany呈现在COMPANY组件之前，因此，您只能获得路线并作为道具进行匹配。

由于withLoader封装了公司组件，因此它将访问其呈现位置的父组件的道具，而不是其封装组件的道具。

根据您的查询，有两种方法

要么在HOC中获取所有数据，然后呈现“公司”组件

或

将从父级获取的数据传递给“公司”组件。

{{1}}

您要尝试的是尝试传递尚未呈现的子项的道具。

无法访问高阶组件反应中的道具

1 个答案: