javascript - 获取 React JS 私有(private)方法的最佳实践是什么？

Question

当您为事件设置组件或元素回调时，教程和文档会显示如下代码:

'use strict';
import React from 'react';

let FooComponent = React.createClass({
  handleClick(args) {
    ...
  },
  render() {
    return <div>
      <h1>Some title</h1>
      <button onClick={this.handleClick}>Click Me!</button>
    </div>
  }
};
export default FooComponent;

但是这个handleClick 方法可以从这个组件访问，如果我在另一个组件上使用 FooComponent 并为它分配一个引用，我可以从这个其他组件访问 handleClick。

'use strict';
import React from 'react';
import FooComponent from './FooComponent';

let BarComponent = React.createClass(
  handleBarComponentClick(e) {
    this.refs.fooComponent.handleClick(null);
  },
  render() {
    return <div>
      <FooComponent ref="fooComponent" />
      <button onClick={this.handleBarComponentClick}>Other click</button>
    </div>
  }
);
export default BarComponent;

我不喜欢我可以访问该方法这一事实，在我看来这应该是私有(private)的，或者也许我不必担心它。但为了解决这个问题，我开始在我的项目中使用这种“好的/坏的做法”来避免访问该方法。

'use strict';
import React from 'react';

function handleClick(args) {
  ...
}

let FooComponent = React.createClass({
  render() {
    return <div>
      <h1>Some title</h1>
      <button onClick={handleClick.bind(this)}>Click Me!</button>
    </div>
  }
};
export default FooComponent;

因此无法从外部组件访问它。

我的疑问是，如果我正在做的是好事还是坏事，或者如果我继续这样做会发生或不会发生什么问题？或者我不必担心在 createClass 参数中设置事件处理程序？

提前致谢:)

Answer 1

您检查过 Flux 模式了吗？ https://facebook.github.io/react/docs/flux-overview.html

在我的 React 应用程序中，这不是问题。虽然我没有以私有(private)方式定义事件处理程序，但一般规则是您永远不要在组件上调用方法。如果子组件需要将某事通知其父组件，这可以通过作为 prop 从父组件传输到子组件的回调或通过改变子组件中的全局状态(通过操作)来完成。另一方面，如果父组件需要在子组件上完成某些事情，那么它会更改子组件上的 Prop (或此类 Prop 的值)。

尝试回答您的问题，我会说您现在正在做的事情(在私有(private)范围内定义事件处理程序)是可以的。但我认为为每个处理程序做这样的事情更麻烦。我建议您检查一下您的应用程序的总体架构是否符合 React 的建议。