วิธีที่ถูกต้องในการสืบทอดส่วนประกอบ React

ฉันเข้าใจว่าคำถามของฉันค่อนข้างลำเอียงเล็กน้อย แต่ฉันยังใหม่มากใน Javascript และ prototypes และฉันอ่านมาแล้ว แต่ฉันไม่เข้าใจจริงๆ ว่าจะนำเทคนิคนั้นไปใช้กับปัญหาเชิงปฏิบัติได้อย่างไร ตัวอย่างจะเป็นประโยชน์มาก ฉันมีองค์ประกอบ React ซึ่งโดยพื้นฐานแล้วดูเหมือนว่า:

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

ฉันยังมี Component2 ซึ่งโดยพื้นฐานแล้วเหมือนกันทุกประการ แต่มี <input/> เพิ่มเติมอีกหนึ่งรายการใน return ของฟังก์ชัน render

ฉันยังมี Component3 ซึ่งใช้ฟังก์ชันเดียวกัน แต่มีฟังก์ชัน render() ที่แตกต่างกัน

แล้วจะใช้การสืบทอดที่นี่และหลีกเลี่ยงการคัดลอกและวาง 3 ครั้งได้อย่างไร ฉันแค่พลาดภาพประกอบที่เป็นประโยชน์ ดังนั้นฉันจะขอบคุณมัน

แก้ไข 1____________________________________________________ ดังนั้นฉันจึงพยายามใช้การสืบทอด Prototype ตามคำตอบแรก แต่ดูเหมือนว่า React จะไม่เห็นฟังก์ชันเหล่านี้: getInitialState() เป็นโมฆะ สถานะเริ่มต้นเป็นโมฆะหลังจากการเรนเดอร์ เกิดอะไรขึ้นกับแนวทางนี้?

ฉันพยายามทำตามตำราเรียนและทำ:

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

แต่เมื่อฉันเปิดเบราว์เซอร์ ฉันได้รับข้อผิดพลาด: Uncaught Invariant Violation: createClass(...): Class specification must implement arendermethod.

ฉันทำอะไรผิดด้วยวิธีนี้?

แก้ไข2_______________________________________________

จริงๆ แล้ว ฉันเห็นว่า React ไม่รองรับมิกซ์อินทั้งต้นแบบ ควรใช้องค์ประกอบแทน มีการอธิบายไว้ในบทความนี้: แดน บทความของ Abramov Mixins Are Dead องค์ประกอบที่มีชีวิตชีวา