ماهو - reactjs vs angular




هل هناك أي طريقة للوصول إلى مثيل المكون الأصلي في رد فعل؟ (2)

ليس هناك شيء خاطئ إذا كنت بحاجة إلى الوصول إلى الدعائم الوالد وظائف من الأطفال.

النقطة هي أنه يجب عليك أبدا استخدام التفاعلات الداخلية واجهات برمجة التطبيقات غير الموثقة.

أولا وقبل كل شيء، من المرجح أن تتغير (كسر التعليمات البرمجية)، والأهم من ذلك، هناك العديد من النهج الأخرى التي هي أنظف.

تمرير الدعائم للأطفال

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    fn() {
        console.log('parent')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

const Child = ({ fn }) => <button onClick={fn}>Click me!</button>

مثال عملي

استخدام السياق (إذا لم يكن هناك علاقة مباشرة بين الوالد / الطفل)

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    getChildContext() {
        return {
            fn: this.fn,
        }
    }

    fn() {
        console.log('parent')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

Parent.childContextTypes = {
    fn: React.PropTypes.func,
}

const Child = (props, { fn }) => <button onClick={fn}>Click me!</button>

Child.contextTypes = {
    fn: React.PropTypes.func,
}

مثال عملي

وأنا أعلم أنه ليس نهجا وظيفيا لتكون قادرة على القيام بشيء من هذا this.parent في عنصر رد فعل، وأنا لا يمكن أن يبدو للعثور على أي خصائص على نسخة مكون رد فعل التي تؤدي إلى الوالد، ولكن أنا فقط أتطلع إلى تكون قادرة على القيام ببعض الأشياء المخصصة حيث أحتاج هذا.

قبل أي شخص يضيع وقته شرح أنه ليس رد فعل وظيفي "الطريق"، فهم أن أحتاج هذا بسبب ما يلي أحاول تحقيق:

بناء جهاز ترانزبيلر لمحرك القوالب سباسيبارس النيزك، الذي يأخذ نموذج تقديم يأخذ بعين الاعتبار المكونات / القوالب الأصل.

لقد بنيت بالفعل ترانسبلر أن يعدل جسك الانتاج لتحقيق ذلك. أفعل هذا عن طريق تمرير في parent={this} في جميع مكونات الطفل تتألف. ومع ذلك، بعد حقيقة وقعت لي أنه ربما أنا ببساطة لا أعرف شيئا من شأنها أن تعطيني وسيلة للوصول إلى مثيل المكون الأصل دون تعديلات إضافية ترانزبيلاتيون .

فإن أي نصائح موضع تقدير كبير.


تحديث للتفاعل 0.13 وأحدث

تم إهمال Component._owner في رد الفعل 0.13 و _currentElement لم يعد موجودا كمفتاح في this._reactInternalInstance . لذلك، باستخدام الحل أدناه يلقي Uncaught TypeError: Cannot read property '_owner' of undefined .

البديل هو، اعتبارا من رد 16، this._reactInternalFiber._debugOwner.stateNode .

لقد أدركت بالفعل أن هذا ليس أمرا جيدا أن تفعله دائما تقريبا، ولكنني أكرره هنا للأشخاص الذين لا يقرأون السؤال بشكل جيد: هذا عادة ما يكون طريقة غير مناسبة لإنجاز الأمور في رد الفعل.

لا يوجد شيء في أبي العامة التي سوف تسمح لك للحصول على ما تريد. قد تكون قادرا على الوصول إلى هذا باستخدام التفاعلات الداخلية، ولكن لأنه أبي خاصة انها عرضة للكسر في أي وقت.

وأكرر: يجب أن يكاد يكون من المؤكد عدم استخدام هذا في أي نوع من رمز الإنتاج.

ومع ذلك، يمكنك الحصول على المثيل الداخلي للمكون الحالي باستخدام this. _reactInternalInstance this. _reactInternalInstance . في هناك، يمكنك الوصول إلى العنصر عبر الخاصية _currentElement ثم مثيل المالك عبر _owner._instance .

إليك مثال على ذلك:

var Parent = React.createClass({
  render() {
      return <Child v="test" />;
  },

  doAThing() {
    console.log("I'm the parent, doing a thing.", this.props.testing);
  }
});

var Child = React.createClass({
  render() {
    return <button onClick={this.onClick}>{this.props.v}</button>
  },

  onClick() {
    var parent = this._reactInternalInstance._currentElement._owner._instance;
    console.log("parent:", parent);
    parent.doAThing();
  }
});

ReactDOM.render(<Parent testing={true} />, container);

وهنا مثال جسفيدل العمل : http://jsfiddle.net/BinaryMuse/j8uaq85e/





reactjs