Question

有没有办法公开React组件的功能？

class MyComponent extends Component {

   someFunction() {

      // I'd like to expose this function
   }

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

在上面的示例中，我希望公开someFunction()，以便我可以从父组件中调用它。

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

两个问题：

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

Answer 1

我可以这样做吗？

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

如何？

检查此代码段：

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

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

Answer 2

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

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

仅通过道具保持组件的界面有助于更好地封装组件的内部工作方式。

对于您的具体示例，我希望您更改visible切换，让datePicker组件自行决定它对该属性值的处理。

暴露React组件的功能

2 个答案: