Reagieren Komponenten Vererbung durch Compositon

Question

ich nicht verstehen, wie die Vererbung durch Compositon zum Beispiel machen zu machen haben wir eine einfache Clock Komponente:

class Clock extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {date: new Date()}; 
    } 

    componentDidMount() { 
    this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 
    } 

    componentWillUnmount() { 
    clearInterval(this.timerID); 
    } 

    tick() { 
    this.setState({ 
     date: new Date() 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 
     </div> 
    ); 
    } 
} 

und dann wollen wir eine andere Clock Component HappyClock machen und haben gleiche Logik, sondern verschiedene render-Methode:

class HappyClock extends Clock { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello, Happy world!</h1> 
     <h2>It is Happy {this.state.date.toLocaleTimeString()} Time.</h2> 
     </div> 
    ); 
    } 
} 

, wie ich es durch Zusammensetzung tun können, wenn wir viele verschiedene Uhren und derselben Logik

haben wollen

Answer 1

Sie können reine Komponenten erstellen, die das wiedergeben, was Sie bereits in Ihren Rendermethoden haben.

Zum Beispiel:

class ClockDisplay extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
    return (
     <div> 
     <h1>{this.props.greeting}</h1> 
     <h2>{this.props.displayText}</h2> 
     </div> 
    ); 
    } 
} 

Dann können Sie diese Komponente in der Clock-Komponente verwenden.