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

Question

Suppose that I had a React component such as

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

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

And I have another file such as

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

If getEventListeners calls set state from the component to change one of the properties would it cause an issue?

Answer 1

This causes the design issue, passing the whole component by reference and accessing it in a function breaks the principle of least privilege . Calling the function with a context like getEventListener.call(this, event) would have the same problem.

If getEventListener isn't supposed to be reused between components, it shouldn't be extracted from a component where it's used. It uses this.setState method and clearly belongs to a class. In case multiple inheritance is involved, a mix-in can be used.

A solution that is idiomatic to React is reusable state updater function . It's decoupled from a component and supposed to be used for pure synchronous functions:

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

   ...

   this.setState(getEventListeners(event));