إذا استخدمت <Connector>
حول بعض المكونات التي تحتوي على سمة ref
، فلن أستطيع الوصول إليها عبر this.refs
. لقد أعدت تصميمه قليلاً لإصلاحه - أعتقد أن هذا نوع من العبث لمكونات ذكية مقابل مكونات غبية. أم أنني أفتقد شيئًا بسيطًا؟
المكونات الذكية مقابل المكونات الغبية
أعتقد ذلك ، نعم ، يجب أن يعرض المكون _smart_ مع Connector
مكونات _dumb_ ويمرر props
المطلوب إليهم.
cymen يمكنك استخدام رد
const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
<strong i="7">@decorator</strong>
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
}
ما ورد أعلاه سوف يسجل div. ربما هذا يساعد؟
يستخدم هذا المصمم ديكورًا ، ولكن من المحتمل أن يعمل جيدًا إذا مررت رد اتصال إلى مكوناتك التي قمت بتداخلها داخل Connector
. داخل رد الاتصال ، يمكنك بعد ذلك إعادة تعيين المرجع إلى المكون الخاص بك.
هل تحتاج حقًا إلى مرجع متداخل؟
إذا كنت ترغب فقط في الوصول إلى عقدة DOM ، فيمكنك إجراء findDOMNode
على المكون الخارجي وسيعمل بشكل جيد. (سيشيرون إلى نفس العقدة).
إذا كنت تريد استدعاء الطرق ، ففكر في استخدام props
كواجهة تعريفية بدلاً من ذلك. راجع أيضًا https://github.com/jsstyles/react-jss/issues/15 للحصول على مناقشة حول هذا الموضوع.
أخيرًا ، إذا كنت متأكدًا ، فأنت بحاجة إلى مرجع ، نعم ، يمكنك الحصول على مرجع متداخل مثل johanneslumpe المقترح في https://github.com/gaearon/redux/issues/183#issuecomment -115988937.
في الختام ، يرجى إعلامي إذا كان هناك شيء غير واضح.
عذرًا ، لكني لا أرى كيف يمكن اعتبار استخدام "findDOMNode" في مثل هذه الحالة التافهة حلاً. هذا هو نمط مضاد! إنه يعيدنا إلى أيام jquery حيث نحتاج إلى الوصول إلى كل العناصر ومعرفة التسلسل الهرمي للعقد بالضبط. مستنداتك تقرأ بشكل صحيح:
"findDOMNode () عبارة عن فتحة هروب ... لا يُنصح باستخدام فتحة الهروب هذه لأنها تخترق تجريد المكون"
عذرًا ، لكني لا أرى كيف يمكن اعتبار استخدام "findDOMNode" في مثل هذه الحالة التافهة حلاً. هذا هو نمط مضاد! إنه يعيدنا إلى أيام jquery حيث نحتاج إلى الوصول إلى كل العناصر ومعرفة التسلسل الهرمي للعقد بالضبط.
لست متأكدا ما تعنيه. أقول أنه إذا كنت بحاجة إلى مرجع للعقدة المعروضة (على سبيل المثال ، لحساب إزاحتها وحجمها) ، يمكنك استخدام findDOMNode(this)
. أنا لا أقترح عليك "التعمق أكثر" أو تغييره.
ومع ذلك ، إذا لم تكن راضيًا عن هذا ، فما عليك سوى استخدام الدعائم ref callback كما هو مقترح أعلاه.
لا أعتقد أننا يجب أن نعتمد على رؤية findDOMNode(this)
لأنه لا ينطبق على React-Native.
xvalentino findDOMNode ليس ضروريًا. اطلع على البتات المتعلقة بـ getWrappedInstance
في مستندات API .
التعليق الأكثر فائدة
عذرًا ، لكني لا أرى كيف يمكن اعتبار استخدام "findDOMNode" في مثل هذه الحالة التافهة حلاً. هذا هو نمط مضاد! إنه يعيدنا إلى أيام jquery حيث نحتاج إلى الوصول إلى كل العناصر ومعرفة التسلسل الهرمي للعقد بالضبط. مستنداتك تقرأ بشكل صحيح:
"findDOMNode () عبارة عن فتحة هروب ... لا يُنصح باستخدام فتحة الهروب هذه لأنها تخترق تجريد المكون"