公开 React 组件的函数

Question

有没有办法公开 React 组件的函数？

class MyComponent extends Component {

   someFunction() {

      // I'd like to expose this function
   }

   render() {
      return(
         <div>Hello World</div>
      );
   }
}

在上面的例子中，我想暴露someFunction()以便我可以从父组件中调用它。

换句话说，我试图从父组件调用子组件的函数。

两个问题：

1. 我可以这样做吗？如果是这样，怎么办？
2. 这可能是一个更重要的问题：我应该这样做吗？我总是注意我现在可能需要的东西可能会暴露架构缺陷。所以，我想知道我是否应该从父组件调用子组件的函数。

Answer 1

我可以这样做吗？

是的，我们可以通过使用ref来实现这一点，在父组件内渲染时将 ref 分配给 MyComponent，然后使用该 ref 调用该函数。

如何？

检查这个片段：

class Parent extends React.Component { 

   _callChildComponent(){
      this.child.someFunction();
   }

   render() {
      return(
          <div>
            <div onClick={() => this._callChildComponent()}>Call</div>
            <MyComponent ref={el => this.child = el}/>
          </div>
      );
   }
}

class MyComponent extends React.Component {

   someFunction() {
      console.log('hello');
   }

   render() {
      return(
         <div>Hello World</div>
      );
   }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

但我建议您将函数从父组件传递到子组件，并使用该函数传递数据或用于任何其他目的，而不是使用 ref。

Answer 2

虽然可以在子组件上调用函数，但我认为这不是惯用的。

如果你想改变组件的渲染方式，你应该改变它的 props 并触发重新渲染。

仅通过 props 保留组件的接口有助于更好地封装组件的内部工作原理。

对于您的具体示例，我宁愿有一个可以visible更改的切换开关，并让datePicker组件自行决定要对该属性值执行什么操作。