Cara yang benar untuk mewarisi komponen React

Saya memahami bahwa pertanyaan saya sedikit bias, tetapi saya sangat baru dalam Javascript dan prototypes, dan saya membacanya, tetapi saya tidak begitu mengerti bagaimana menerapkan teknik itu pada masalah praktis saya. Jadi sebuah contoh akan sangat membantu. Jadi saya punya komponen React, yang pada dasarnya terlihat seperti itu:

var Component1 = React.createClass({

getInitialState: function () {
        return ({
            searchable: true,
        })
    },

function1: function () {
        return ({
            somevalue
        })
    },

render: function () {

        var redText = {
            color: 'red'
        };

        var redBorder = {
            color: 'red',
            border: '1px solid red'

        };

        return (
                <form>
                    <div>
                        <a onClick={this.props.handleAddClick}>Something</a>
                    </div>

                    <div>
                        <label>Some label</label>
                        <input type="text"/>
                    </div>
               </form> ) 
});

Saya juga memiliki Component2 yang pada dasarnya sama persis, tetapi memiliki satu <input/> tambahan di dalam return dari fungsi render-nya.

Saya juga memiliki Component3, yang memiliki fungsi yang sama, tetapi memiliki fungsi render() yang berbeda.

Lalu bagaimana cara menerapkan warisan di sini dan menghindari copy-paste 3 kali? Saya hanya melewatkan beberapa ilustrasi praktis, jadi saya akan menghargainya.

Sunting1______________________________________ Jadi saya mencoba mengimplementasikan pewarisan Prototipe sesuai jawaban pertama, tetapi tampaknya React tidak melihat fungsi-fungsi ini: getInitialState() adalah null, keadaan awal adalah null setelah rendering. Apa yang salah dengan pendekatan ini?

Saya juga mencoba mengikuti buku teks dan melakukan:

function MyPrototype() {};
MyPrototype.prototype.getInitialState = function () {
    return ({
        someProperty: true;
    })
};

function Component1() {};
Component1.prototype = Object.create(MyPrototype.prototype);
Component1.prototype.render = function () {
    console.log(this);
    return (<div></div>)};

var MyComponent1 = React.createClass(new Component1());

Namun ketika saya membuka browser, saya mendapat pesan error: Uncaught Invariant Violation: createClass(...): Class specification must implement arendermethod.

Apa yang saya lakukan salah dengan cara ini?

Sunting2________________________________________________

Sebenarnya, saya melihat bahwa React tidak mendukung mixin dan juga prototipe. Komposisi harus digunakan sebagai gantinya. Dijelaskan dalam artikel ini: Dan Artikel Abramov, Mixin Sudah Mati. Komposisi Umur Panjang