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

Question

背景我创建了一个功能齐全的组件。组件有state和props，里面有很多方法。根据操作系统（ios / android），我的组件应该以不同的方式工作。所以我通过if如下语句解决了这个问题。if( platform.os == 'ios') { ... } else { ... }问题是随着代码量的增加，可读性出现问题，我决定为IOS和Android分别制作一个组件。首先想到的是继承，因为 ES6 和 Typescript 支持类。概念图是这样的。然而，React 不推荐继承。所以我只是要把被 props 覆盖的函数交给 SpeechIOS 组件的渲染函数中的 Speech 组件。代码如下。语音.tsxtype 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.tsximport 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> {

    constructor(props: Props) {

        super(props);

        this.speech = React.createRef();

    }

    // render

    render() {

        ...

        return (<Speech ref={this.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.speech.current.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..

    };

}

Answer 3

您应该定义一个顶级组件来定义共享的道具和方法，并使用它们来呈现您的 ios 或 android 组件。把道具和方法传给孩子。这是在反应中优于继承的组合。例子：

class Speech extends React.Component {

  state ={shared: 'state'}

  sharedMethod = () => {

    this.setState({blah: 'blah})

  }

  render() {

    const Root = Platform.select({

      ios: SpeechIOS,

      android: SpeechAndroid

    })

    return <Root onClick={this.sharedMethod}  shared={this.state.shared}/>

  }

}