Question

没有在渲染方法中实际使用它？

我有一个React组件，它只保存逻辑，但仍使用来自redux的dispatch（）。它称为F1_Start

// import F1_Start   from './F1_Start'

如何使该文件运行？

我尝试过

new F1_Start()，但这似乎不起作用。

我最终将其放入一个简单的JavaScript类中，但随后我仍然需要访问dispatch()

实际文件

import React from 'react';
import { connect } from 'react-redux';


class F1_Start extends React.Component {

  constructor(props) {
    super(props);
    this.fetchData();
  }

  fetchData = () => {
    const options = {
      credentials: 'include'
    };
    fetch("/api/items", options)
    .then((response) => {
      return response.json();
    })
    .then((results) => {
      this.props.dispatch({type: 'updateBookmarks', bookmarks: results});
      this.findStatus(results);
    })
    .catch((err) => {
      this.notLoggedIn();
      console.log('DEBUG: fetch /api/items error');
    });
  }

  findStatus = (results) => {
    if(results[results.length - 1].id_google){
      const user = results.slice(-1);
      this.loggedIn(user);
    } else {
      this.notLoggedIn();
    }
  }

  notLoggedIn = () => {
    window.setTimeout(() => {
      // this.props.dispatch({ type: 'updateMenu', current: 'splash' });
    }, 4000);
    window.setTimeout(() => {
      // this.props.dispatch({ type: 'toggleSideBar' });
    }, 8000);
  }

  loggedIn = (user) => {
    this.props.dispatch({ type: 'setUser', current: user[0] });
  }
}

export default connect()(F1_Start);

Answer 1

反应类需要一个render方法，并且它们要求它返回组件，文本，元素或null。

一种方法是使您的组件成为一个简单的包装器：

// F1_Start
class F1_Start extends Component {
  ...constructor, fetchData, etc, plus:

  render() {
    return this.props.children;
  }
}

// At (or near) the top level of your app
const App = props => (
  <Provider>
    <F1_Start>
      <RestOfTheApp />
    </F1_Start>
  <Provider>
)

您可以执行此操作的另一种方法是，就像您说的那样，仅使用JS类（不使用React），将Redux store传递给它，然后直接访问store.dispatch，而不是使用{ {1}}的{{1}} HOC。这样做似乎有些奇怪，但是应该可以。

Answer 2

您可以创建一个普通类F1_Start并在父组件ParentComponent中调用其方法。您的普通类可以返回适当的操作，这些操作可以从父级连接的组件中分派。这样，您可以将服务逻辑分开。下面是我可以想到的代码。

注意：此代码未经测试，因此您需要根据需要进行更改。

class ParentComponent extends React.Component{
    constructor() {
        this.fecthingData()
    }

    fecthingData() {
        let f1_Start = new F1_Start();  
        f1_Start.fetchData().then(actions => {
            actions.forEach(action => {
                this.props.dispatch(action);
            });
        })
    }
}
export default connect()(ParentComponent);


class F1_Start  {

     fetchData () {
         const actions = [];
         const options = {
            credentials: 'include'
        };
        return fetch("/api/items", options)
            .then((response) => {
                return response.json();
            })
            .then((results) => {
                actions.push ({ type: 'updateBookmarks', bookmarks: results });
                actions.push(this.findStatus(results));
                return actions;
            })
            .catch((err) => {
                console.log('DEBUG: fetch /api/items error');
                actions.push(this.notLoggedIn());
                return actions;
            });
    }

    findStatus (results) {
        if (results[results.length - 1].id_google) {
            const user = results.slice(-1);
            return this.loggedIn(user);
        } else {
            return this.notLoggedIn();
        }
    }

    notLoggedIn() {
            return { type: 'updateMenu', current: 'splash' };
     }

    loggedIn(user){
        return { type: 'setUser', current: user[0] };
    }
}

export default F1_Start;

我该如何做一个React组件构造...？

2 个答案: