كيفية تبديل الفصل في المكون المتداخل في ReactJS

Question

لدي طريقة render() في المكون الجذر الخاص بي:

render: function() {
    return (
        <div className="question">
            <QuestionA question={this.props.question} author={this.props.author}/>
            <QuestionB yes={this.state.yes} no={this.state.no} />
            <div className="question-side-switcher" onClick={this.handleSideChanging}></div>
        </div>
    );
}

حيث أريد تبديل الفئة "النشطة" بين مكونات QuestionA وQuestionsB عندما ينقر المستخدم على الزر.كيف يمكنني أن أفعل هذا؟ضع في اعتبارك أن QuestionA وQuestionB قد قاما بتعيين أسماء الفئات الخاصة بهما في أساليب render() الخاصة بهما.على سبيل المثال تقديم QuestionB ():

render: function() {
    return (
        <section className="question-b-container">
            ...
        </section>
    );
}

Answer 1

هناك عدة طرق يمكنك التعامل مع هذا.

إذا كنت تريد السيطرة على الوالد على الفصل الإضافي، فيمكنك ببساطة نقلها إلى مكونات الطفل وأضفها إلى اسم الفئة الموجودة ( jsfiddle التجريبي ):

giveacodicetagpre.

ومع ذلك، فمن المحتمل أن يكون ذلك أكثر معنى للسماح للطفل بإدارة اسم الفصل، وببساطة أرسل بعض البيانات إلى الإشارة إلى ما إذا كان يجب تعيين فئة نشط ( JSFiddle Demo ):

giveacodicetagpre.

Answer 2

مثل بريان فولكر ذكره في تعليقات, ، الطريقة الرسمية الآن للتعامل مع الفئات في React هي استخدام أسماء الفئات جدوى.

يمكنك تحديد المكونين الخاصين بك مثل ذلك:

import React, { Component } from 'react'
import classNames from 'classnames'

class QuestionA extends Component {

  render () {

    const { active } = this.props
    const cx = classNames('question-a-container', { active })

    return (
      <section className={cx}></section>
    )
  }

}

وقم ببساطة بتمريرهم active دعم لتبديل فئة تحمل الاسم نفسه.

Answer 3

كان لدي مشكلة مماثلة لهذه، لقد قمت بإنشاء درج مببر وكنت أتعرض فقط المكون المطلوب مع Tabber لكن هذا الحل لم يكن مثاليا لأنني فقدت حالة مكون الطفل في كل مرة أطفأ إليهاtabber.

لتجنب ذلك في التجسد أدعو وظيفة لتقديم جميع أطفالي، في هذه الوظيفة، قمت بإلغاء كل طفل في DIV وعمي اسم Classname اللازم إلى DIV، في حالتي، أحتاج لعرض مكون واحد لكلالوقت لذلك كنت أستخدم العرض: Block أو None اعتمادا على الزر النقر فوق.

giveacodicetagpre.

.hiddencomponent { عرض لا شيء؛ }

.visiblecomponent { العرض محجوب؛ }