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;

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

'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应用中，这不是一个问题。虽然我没有以私有方式定义事件处理程序，但一般规则是您永远不要在组件上调用方法。如果子组件需要通知其父项某些内容，则可以通过从父项传递给子项作为prop的回调或通过改变子组件中的全局状态（通过操作）来完成。另一方面，如果父母需要在孩子身上完成某些事情，那么它会改变子组件上的道具（或这些道具的价值）。

试着回答你的问题，我会说你现在正在做的事情（在私人范围内定义事件处理程序）是可以的。但我觉得为每个处理程序做这样的事情更麻烦。我建议你检查你的应用程序的一般架构是否与React建议的一致。

获取React JS私有方法的最佳实践是什么？

1 个答案: