Javascript 如何减少react-redux样板——我尝试创建一个组件工厂，但我'；我遇到了一些错误

我考虑创建一个名为

createScreen

的工厂函数，以减少

react redux

所需的样板文件

看起来是这样的：

ParentScreenFactory.js

export default function createScreen(stateActions = []) {
  class ParentScreen extends React.Component {

  }

  function mapStateToProps(state) {
    return {
      ...state,
    };
  }

  function mapDispatchToProps(dispatch) {
    const creators = Map()
            .merge(...stateActions)
            .filter(value => typeof value === 'function')
            .toObject();

    return {
      actions: bindActionCreators(creators, dispatch),
      dispatch,
    };
  }

  return connect(mapStateToProps, mapDispatchToProps)(ParentScreen);
}

const ParentScreen = createScreen([
  routingActions,
  authActions,
]);

class Child extends ParentScreen {

  constructor(props) {   // <-- error on this line
    super(props);
  }

  render() {
    return (
      <View/>
    );
  }
}
export default Child;

Child.js

export default function createScreen(stateActions = []) {
  class ParentScreen extends React.Component {

  }

  function mapStateToProps(state) {
    return {
      ...state,
    };
  }

  function mapDispatchToProps(dispatch) {
    const creators = Map()
            .merge(...stateActions)
            .filter(value => typeof value === 'function')
            .toObject();

    return {
      actions: bindActionCreators(creators, dispatch),
      dispatch,
    };
  }

  return connect(mapStateToProps, mapDispatchToProps)(ParentScreen);
}

const ParentScreen = createScreen([
  routingActions,
  authActions,
]);

class Child extends ParentScreen {

  constructor(props) {   // <-- error on this line
    super(props);
  }

  render() {
    return (
      <View/>
    );
  }
}
export default Child;

这行代码是什么。 你看到这里有什么明显的错误吗？ 除此之外，对于如何减少所有样板代码，您还有更好的想法吗

---

谢谢。

如果您使用实际的组件类，而不是尝试扩展空的连接类（），那么一切都会变得更简单

如果您希望您的组件可以预期地工作，那么您需要直接连接您的组件。请尝试从工厂返回函数

export default function createScreen(stateActions = []) {
  return (Component) => {
    // ...
    return connect(mapStateToProps, mapDispatchToProps)(Component);
  };
}

然后您的实例化开始看起来像这样

class Child extends React.Component {
  // ...
}

const ParentScreen = createScreen([
  routingActions,
  authActions,
]);

export default ParentScreen(Child);

如果您想在所有组件之间共享一些行为，那么最好使用高阶组件

function withCommonBehaviour(Component) {
  return (props) => {
    let newProps = doSomething(props);
    return <Component {...newProps} />;
  };
}

---

如果您使用实际的组件类，而不是尝试扩展空的连接类（），那么一切都会变得更简单

如果您希望您的组件可以预期地工作，那么您需要直接连接您的组件。请尝试从工厂返回函数

export default function createScreen(stateActions = []) {
  return (Component) => {
    // ...
    return connect(mapStateToProps, mapDispatchToProps)(Component);
  };
}

然后您的实例化开始看起来像这样

class Child extends React.Component {
  // ...
}

const ParentScreen = createScreen([
  routingActions,
  authActions,
]);

export default ParentScreen(Child);

如果您想在所有组件之间共享一些行为，那么最好使用高阶组件

function withCommonBehaviour(Component) {
  return (props) => {
    let newProps = doSomething(props);
    return <Component {...newProps} />;
  };
}

---

你的题目与你的问题完全无关。你问了一个关于如何修正错误的问题，并在最后加上了“如何简化样板文件”。你的标题与你的问题完全无关。你问了一个关于如何修复错误的问题，并在最后加入了“如何简化样板文件”。这看起来不错，但是有没有办法在父组件的构造函数上运行这些东西呢？这是我忘记提到的，但我需要它。我不认为我理解“父组件”是什么。好吧，让我们假设我希望我的子组件在其构造函数中始终运行一些样板代码，如下所示：类Child扩展React.component{constructor（props）{/*在这里做点什么*/}我可以不为我根据你的建议创造的每个孩子一遍又一遍地写这些吗？也许通过在

createScreen

方法中添加样板代码？这真的取决于您想做什么，但是组件之间共享行为是最好的处理方法。绝对精彩！谢谢你的回答。这看起来不错，但是有没有办法在父组件的构造函数上运行东西呢？这是我忘记提到的，但我需要它。我不认为我理解“父组件”是什么。好吧，让我们假设我希望我的子组件在其构造函数中始终运行一些样板代码，如下所示：类Child扩展React.component{constructor（props）{/*在这里做点什么*/}我可以不为我根据你的建议创造的每个孩子一遍又一遍地写这些吗？也许通过在

createScreen

方法中添加样板代码？这真的取决于您想做什么，但是组件之间共享行为是最好的处理方法。绝对精彩！谢谢你的回答。