Diğer çocuklara dokunmamaya devam ederken diğer çocuklara dokunarak çocukların girişlerini ve fonksiyonlarını ekleme

Question

Şimdi bir süredir çalışmaya çalışıyorum ve aşağıdakileri nasıl yapacağınızdan emin değilim. Form bileşenim, düzenli bir html biçimlendirmesi ve bir girdi içeren çocuklar içeriyor. Çocuk bir Giriş ise, attachToForm ve detachFromForm işlevlerini eklemek istiyorum. Eğer bir giriş değilse, çocukların bir alt giriş alanına sahip olmadığından emin olmak için çocukları çaprazlamaya devam etmek istiyorum. Öğenin sayfamda görünmesini istediğim bir girdi olup olmadığını, yalnızca işlevleri girişlere eklemek istiyorum.

Sorun sadece işlevlerimi yalnızca girdileri geri almak, etiketleri ve başlığı kaldırmak için alabiliyorum. Bunu biliyorum çünkü sadece newChildren'e girdi içeren elemanlar ekliyorum, ama eğer bölümleri çoğalırsam diğer elemanları da diğerlerine iter ve bunu yapmanın başka bir yolunu düşünebilirim. Temel JS'yi anlamadığım veya beyin boşluğuna sahip olmadığımdan emin değilim.

React.Children.forEach(children, function(child) { 
     var current = child; 
     if (child.props && child.props.name) { 
      this.newChildren.push(React.cloneElement(child, { 
       detachFromForm: this.detachFromForm, 
       attachToForm: this.attachToForm, 
       key: child.props.name 
      })); 
     } else if (child.props && child.props.children){ 
      this.newChildren.push(child); 
      this.registerInputs(child.props.children); 
     } else { 
      *need to keep track of parent elements and elements that do not have inputs 
     } 
    }.bind(this)); 

Düzenleme: Emin değil gerekli ama bu ve bir kenara ben aşağıdakileri yapın ama almak isteyen dışarı çok daha basit başladıkça örnek form im

return ( 
      <Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal> 

       <Form onSubmit={this.saveChanges}>  
        <FormSection className="edit-team-details" sectionHeader="Team Details"> 
         <FormField label="Name"> 
          <Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/> 
         </FormField> 
         <FormField label="Mission"> 
          <Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline /> 
         </FormField> 
        </FormSection> 

        <FormSection className="privacy-settings" sectionHeader="Privacy Settings"> 
         <FormField label="Included in global search results" > 
          <SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" /> 
         </FormField> 
         <FormField label="Accessible by anyone" > 
          <SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" /> 
         </FormField> 
         <FormField label="Secured with WitCrypt" > 
          <SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" /> 
         </FormField> 
        </FormSection> 
        <FormSection sectionHeader="Participants"> 
         {participantsList} 
         <div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}> 
          <span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span> 
          <span>Add a Participant</span> 
          <span className="add-action roll"><a></a></span> 
         </div> 
        </FormSection> 
        <Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button> 
       </Form> 


       <AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} /> 
      </Modal> 
     ); 

geçme durumunda:

"Özellik eklenemiyor attachToForm, nesne genişletilebilir değil"

Birisi neden biliyorsa lütfen bana bildirin. Bir hata mesajının bakılırsa

registerInputs: function (children) { 

    React.Children.forEach(children, function (child) { 

     if (child.props.name) { 

     child.props.attachToForm = this.attachToForm; 
     child.props.detachFromForm = this.detachFromForm; 
     } 

     if (child.props.children) { 
     this.registerInputs(child.props.children); 
     } 
    }.bind(this)); 
    } 

Answer 1

, sen değişmez prop nesne ile ilgili bir sorun var. 0.14 prop tepki itibaren "dondurulur":

props nesne şimdi artık desteklenen bir bileşen elemanı oluşturduktan sonra sahne mutasyona dondurulur. Çoğu durumda, bunun yerine React.cloneElement kullanılmalıdır. Bu değişiklik, bileşenlerinizi akılda tutmayı kolaylaştırır ve yukarıda belirtilen derleyici optimizasyonlarını mümkün kılar. Blog post on this

Yani bir yerde kodunuzda bir hataya neden bir prop nesneyi uzatmak deneyin.

prop etkileşimlerinizin farklı bölümlerini, sorunun tam olarak çözüleceği try..catch yapısıyla sarabilirsiniz.