javascript - React - 从另一个文件更新状态的组件

Question

假设我有一个 React 组件，例如

    import { getEventListener } from 'controls';
    class SomeComponent extends React.Component {
          render() {
             return (<div onClick={this.handleEvent}></div>) 
          }

          handleEvent = (event) => {
             getEventListener(event, this);
          }
    }

我还有另一个文件，例如

   export function getEventListeners(event, component) {
       component.setState({x: 1};
   }

如果 getEventListeners 从组件调用 set state 来更改其中一个属性，是否会导致问题？

Answer 1

这会导致设计问题，通过引用传递整个组件并在函数中访问它会中断 the principle of least privilege 。使用 getEventListener.call(this, event) 之类的上下文调用函数也会出现同样的问题。

如果 getEventListener 不应该在组件之间重用，则不应从使用它的组件中提取它。它使用 this.setState 方法并且显然属于一个类。如果涉及多重继承，可以使用混合。

React 惯用的解决方案是可重用的 state updater function 。它与组件分离，应该用于纯同步函数:

   export const getEventListeners = event => state => {
     // return state object that derives from an event
   };

   ...

   this.setState(getEventListeners(event));