反應的組分通過Compositon

Question

我不明白如何讓繼承使通過Compositon 例如，我們有一個簡單的Clock組件使繼承：

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> 
    ); 
    } 
} 

，然後我們要再拍時鐘組件HappyClock，它具有相同的邏輯，但不同的渲染方法：

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> 
    ); 
    } 
} 

我怎麼能做到這一點通過成分，如果我們想有許多不同的時鐘，同樣的邏輯

Answer 1

您可以創建純粹的組件來渲染渲染方法中已有的東西。

例如：

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

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

然後你就可以在時鐘組件中使用該組件。