如何构建React组件......？

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

React类需要一个render方法，它们要求它返回一个component，text，element或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 ，而不是使用react-redux的connect 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;