反应调用子方法的不同方式-Reactdifferentwaysofcallingachildmethod

React says we should not use refs where possible and I noticed that you can't use shallow rendering testing with refs so I have tried to remove refs where possible. I have a child component like this:

React说我们不应该在可能的地方使用refs,我注意到你不能使用refs进行浅层渲染测试,所以我试图在可能的情况下删除refs。我有一个像这样的子组件:

class Child extends React.Component {
    play = () => {
        //play the media
    },
    pause = () => {
        //pause the media
    },
    setMedia = (newMedia) => {
        //set the new media
    }
}

I then have a parent component that needs to call these methods. For the setMedia I can just use props with the componentWillReceiveProps and call setMedia when the new props come in to the child.

然后我有一个需要调用这些方法的父组件。对于setMedia,我可以使用带有componentWillReceiveProps的props,并在新的props进入子进程时调用setMedia。

With the play and pause functions I cannot do this.

有了播放和暂停功能,我无法做到这一点。

Ben Alpert replied to this post and said:

Ben Alpert回复了这篇文章说:

In general, data should be passed down the tree via props. There are a few exceptions to this (such as calling .focus() or triggering a one-time animation that doesn't really "change" the state) but any time you're exposing a method called "set", props are usually a better choice. Try to make it so that the inner input component worries about its size and appearance so that none of its ancestors do.

通常,数据应该通过props传递到树下。这有一些例外(例如调用.focus()或触发一次性动画并不真正“改变”状态)但是当你暴露一个名为“set”的方法时,通常会出现道具一个更好的选择。尝试做到这一点,以便内部输入组件担心它的大小和外观,以便它的祖先没有。

Which is the best way to call a child function?

哪个是调用子函数的最佳方法?

1. play() and pause() methods can be called from refs as they do not change the state just like focus() and use props for the other functions that have arguments.

play()和pause()方法可以从refs中调用,因为它们不像focus()那样改变状态,并且对具有参数的其他函数使用props。

2. Call the child functions by passing the method name in although this just seems hacky and a lot more complex:

   通过传递方法名称来调用子函数,尽管这看起来很简单,而且更复杂:

   class Child extends React.Component {
       play = () => {
           //play the media
       },
       pause = () => {
           //pause the media
       },
       setMedia = (newMedia) => {
           //set the new media
       },
       _callFunctiOns= (functions) => {
           if (!functions.length) {
               return;
           }
   
           //call each new function
           functions.forEach((func) => this[func]());
   
           //Empty the functions as they have been called
           this.props.updateFunctions({functions: []});
       } 
       componentWillReceiveProps(nextProps) {
           this._callFunctions(nextProps.functions);
       }
   }
   
   class Parent extends React.Component {
       updateFunctiOns= (newFunctions) => this.setState({functions: newFunctions});
       differentPlayMethod = () => {
           //...Do other stuff
           this.updateFunctions("play");
       }
       render() {
           return (
               
           );
       }
   }
   

3. Do this in the child component: this.props.updateFunctions({play: this.play}); The problem with this is that we are exposing(copying) a method to another component that shouldn't really know about it...

   在子组件中执行此操作:this.props.updateFunctions({play:this.play});这个问题是我们将一个方法暴露(复制)到另一个不应该真正了解它的组件......

Which is the best way to do this?

这是最好的方法吗?

I am using method number 2 at the moment and I don't really like it.

我现在正在使用方法2,我真的不喜欢它。

To override child functions I have also done something similar to above. Should I just use refs instead?

为了覆盖子函数,我也做了类似于上面的事情。我应该只使用refs吗?

2 个解决方案

let withMedia = Wrapped => {
  return class extends React.Component {
    state = { playing: false }
    play() { ... }
    render() {
      return (
        
      )
    }
  }
}

import { Media, withMedia } from 'your-library'

let Parent = props =>
  

    Play
    
  

export default withMedia(Parent)

class Child extends React.Component {
  render() {
    return (
      

        Child: Play/Pause
        
Playing: {this.props.playing ? 'Yes' : 'No'}
      
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    
    this.togglePlay = this.togglePlay.bind(this);
    
    this.state = {
      playing: false
    };
  }
  
  togglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }
  
  render() {
    return (
      

        Parent: Play/Pause
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('app')
);