React Component Inheritance 使用父方法和子方法

Question

背景

我创建了一个功能齐全的组件。组件有state和props，里面有很多方法。根据操作系统（ios / android），我的组件应该以不同的方式工作。所以我通过if如下语句解决了这个问题。

if( platform.os == 'ios') { ... } else { ... }

问题是随着代码量的增加，可读性出现问题，我决定为IOS和Android分别制作一个组件。首先想到的是继承，因为 ES6 和 Typescript 支持类。概念图是这样的。

然而，React 不推荐继承。所以我只是要把被 props 覆盖的函数交给 SpeechIOS 组件的渲染函数中的 Speech 组件。

代码如下。

语音.tsx

type Props = {

  team: number,

  onSpeechResults: (result: string) => void

  ...

}

type States = {

  active: boolean;

  error: string;

  result: string;

  ...

};

export default class Speech extends Component<Props,States> {

  state = { ... };

  constructor(props: Props) {

    super(props);

    ...

  }

  // render

  render() {

    ...

    return (

      <ImageBackground source={require("../images/default-background.jpeg")} style={styles.full}>

        ...

      </ImageBackground>

    );

  }

  sendCommand = (code: number, speed: number, callback?: () => void) => { ... }

  getMatchedSpell = (spellWord: string): { code: number, speed: number } => { ... }

  onSpeechResults(e: Voice.Results) { ... };

  ...

}

SpeechIOS.tsx

import Speech from './Speech';

type Props = {}

type States = {}

export default class SpeechIOS extends Component<Props,States> {

  constructor(props: Props) {

    super(props);

    ...

  }

  // render

  render() {

    ...

    return ( <Speech team="1" onSpeechResults={this.onSpeechResults}></Speech> );

  }

  sayHello() {

    console.log("Hello!!");

  }

  // I want that Speech Component call this onSpeechResults function

  onSpeechResults(result: string) {

    this.setState({...});

    let temp = this.getMatchedSpell( ... ); // which is in Speech Component

    this.sendCommand( 10, 100 ... ); // which is in Speech Component

    this.sayHello(); // which is in SpeechIOS component only

    ... other things..

  };

}

问题。

如您所见，onSpeechResultsSpeechIOS Component 中的 which 使用 Speech Component 和 SpeechIOS Component 中的一些功能。

那么，如何解决这个问题呢？我应该使用继承吗？

Answer 1

或者，将任何通用逻辑分解为一个实用函数，例如SpeechUtil.ts，一个包含此共享逻辑和每个实用函数的全新文件，并将它们导出。然后，每个组件分别导入它们。这样可以确保如果您更新该逻辑，它会影响两个组件

Answer 2

你可以使用 React.createRef 来达到这个目的。下面是一个示例代码。import Speech from './Speech';type Props = {}type States = {}export default class SpeechIOS extends Component<Props, States> {&nbsp; &nbsp; constructor(props: Props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.speech = React.createRef();&nbsp; &nbsp; }&nbsp; &nbsp; // render&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; return (<Speech ref={this.speech} team="1" onSpeechResults={this.onSpeechResults}></Speech>);&nbsp; &nbsp; }&nbsp; &nbsp; sayHello() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Hello!!");&nbsp; &nbsp; }&nbsp; &nbsp; // I want that Speech Component call this onSpeechResults function&nbsp; &nbsp; onSpeechResults(result: string) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ ...});&nbsp; &nbsp; &nbsp; &nbsp; let temp = this.speech.current.getMatchedSpell(... ); // which is in Speech Component&nbsp; &nbsp; &nbsp; &nbsp; this.sendCommand(10, 100 ... ); // which is in Speech Component&nbsp; &nbsp; &nbsp; &nbsp; this.sayHello(); // which is in SpeechIOS component only&nbsp; &nbsp; &nbsp; &nbsp; ...other things..&nbsp; &nbsp; };}

Answer 3

您应该定义一个顶级组件来定义共享的道具和方法，并使用它们来呈现您的 ios 或 android 组件。把道具和方法传给孩子。这是在反应中优于继承的组合。例子：class Speech extends React.Component {&nbsp; state ={shared: 'state'}&nbsp; sharedMethod = () => {&nbsp; &nbsp; this.setState({blah: 'blah})&nbsp; }&nbsp; render() {&nbsp; &nbsp; const Root = Platform.select({&nbsp; &nbsp; &nbsp; ios: SpeechIOS,&nbsp; &nbsp; &nbsp; android: SpeechAndroid&nbsp; &nbsp; })&nbsp; &nbsp; return <Root onClick={this.sharedMethod}&nbsp; shared={this.state.shared}/>&nbsp; }}