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从组件调用设置状态以更改属性之一，会引起问题吗？

Answer 1

这会导致设计问题，通过引用传递整个组件并在函数中访问它会中断the principle of least privilege。在List<Map<String,Object>> items = new ArrayList<>(); try { Scanner scanner = new Scanner(new File(ClassLoader.getSystemResource("stats.txt").getFile())); while (scanner.hasNext()){ String[] itemString = scanner.nextLine().split(";"); Map<String,Object> item = new HashMap<>(); item.put("id",Integer.parseInt(itemString[0])); item.put("name",itemString[1]); item.put("quant",Integer.parseInt(itemString[2])); item.put("price",Float.parseFloat(itemString[3])); item.put("suplierId",Integer.parseInt(itemString[4])); items.add(item); } } catch (FileNotFoundException e) { e.printStackTrace(); } items.forEach(i->{ i.forEach((key, value) -> System.out.println(key + " : " + value)); System.out.println(); });之类的上下文中调用该函数会遇到同样的问题。

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

React特有的解决方案是可重用的state updater function。它与组件解耦，应该用于纯同步功能：

this.setState

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

1 个答案: