Przechodzenie przez dzieci dzieci i dodawanie funkcji do wszystkich wejść, podczas gdy inne dzieci pozostają nietknięte

Question

Próbowałem uruchomić to teraz i nie wiem, jak wykonać następujące czynności. Mój komponent formularza ma dzieci, które zawierają zwykłe znaczniki html oraz dane wejściowe. Jeśli dziecko jest wejściem, chcę dodać funkcje attachToForm i detachFromForm. Jeśli to nie jest wejście, chcę kontynuować przechodzenie dzieci, aby upewnić się, że element nie ma pola wejściowego potomka. Wether lub nie element jest wejściem Chcę, aby pojawił się na mojej stronie, chcę tylko dodać funkcje do wejść.

Problem polega na tym, że mogę tylko zwrócić moją funkcję, aby zwróciła tylko dane wejściowe, usuwając etykiety i tytuł. Wiem, że to dlatego, że Im tylko dodaje elementy z danymi wejściowymi do newChildren, ale jeśli popchnę inne elementy w innym, jeśli sekcja otrzymam duplikaty i mogę wymyślić inny sposób robienia tego. Nie jestem pewien, czy nie rozumiem podstawowych JS lub luki w mózgu.

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

Edit: Nie wiem, czy potrzebne, ale to i przykład forma im przejeżdżające

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

Tak na marginesie Zacząłem dużo prostsze chcąc wykonać następujące czynności, ale dostać:

"Nie można dodać obiektu attachToForm, obiekt nie jest rozszerzalny"

Jeśli ktoś wie dlaczego, daj mi znać.

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

Sądząc z komunikatu o błędzie, wystąpił problem z niezmiennym obiektem prop. Począwszy od React 0,14 do prop jest „zamrożony”:

Przedmiotem props jest teraz zamrożony, więc mutacji rekwizyty po utworzeniu element składowy nie jest już obsługiwany. W większości przypadków należy zamiast tego użyć React.cloneElement. Ta zmiana ułatwia zrozumienie składników i umożliwia optymalizację kompilacji wspomnianą powyżej.

Blog post on this

Więc gdzieś w kodzie spróbować rozszerzyć prop obiektu powoduje błąd.

Można owijać różne części interakcji prop z konstrukcją try..catch, która wskaże dokładnie miejsce problemu.