Platzieren von Kindkomponente in Eltern in reactjs

Question

Ich versuche, ein Formular mit benutzerdefinierten Eingabefeldern zu erstellen. Problem ist Struktur der Form ist nicht bekannt. Und ich möchte, dass es so viele gemeinsame Funktionen wie möglich abstrahiert. Also habe ich eine Formularkomponente erstellt, die sich um den Wert aller Eingabekomponenten und Aktionen beim Senden kümmert. Ruhe innerhalb der Form, wie html sein sollte, das vom Benutzer geschrieben wird.

hier ist eine Momentaufnahme:

ein benutzerdefiniertes Eingabefeld:

class InputField extends React.Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      id: this.props.id, 
      value: this.props.value || '', 
      valid: this.props.isValidationRequired || this.props.required ? true : false, 
      errorVisible: false, 
      errorMessage: '' 
     }; 
    } 

    //different helper and conchange function 

    render() { 

     let props = this._getInputFieldProps(); 


       return (<div className={this.props.fieldParentClass}> 
        <label for={this.props.id}>{this.props.name}</label> 
        <input {...props}/> 
        <span className={this.state.errorVisible ? 'show' : 'hide'}>{this.state.errorMessage}</span> 
       </div>) 
    } 

} 

export default InputField; 

Form: -

class FormComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      submitButton: { 
       buttonClasses: ['btn-default', 'vy-btn-secondary'], 
       buttonText: "SUBMIT", 
      } 
     }; 
    } 

    //functions for storing values of children and submit 


    render() { 
     return <form role="form" class="vm-form"> 
        <Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button> 
       </form> 
    } 
} 

export default FormComponent; 

und Anrufer-Klasse: -

class LeadDetails extends React.Component { 

    constructor(HttpService, $state, VymoDataService, props, context) { 
     super(props, context); 
    } 


    render() { 
     return (<FormComponent > 
      <InputField placeholder='hi' value="1" 
      type="text" 
      id="name" 
      maxlength="10"></InputField> 
     </FormComponent>) 
    } 
} 

i so jetzt kann meine Eingabefeldkomponenten umschließen t in einigen HTML-Wrapper und passen Sie das Aussehen, wie ich will. Aber hier bekommt nur das Formular kein Eingabefeld, weder das Kind noch das Kind.

Habe ich es in irgendeiner Weise total falsch gemacht. Was hätte ich angehen sollen?

Answer 1

In Ihrem FormComponent Render-Methode, müssen Sie die „Kinder“ machen, die auf this.props.children befinden wird:

render() { 
    return <form role="form" class="vm-form"> 
       {this.props.children} 
       <Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button> 
      </form> 
} 

Der Grund dafür ist, wenn Sie tatsächlich gehen zu (instantiate) erstellen die Formular, machst du folgendes:

<FormComponent > 
    <InputField placeholder='hi' value="1" 
    type="text" 
    id="name" 
    maxlength="10"></InputField> 
</FormComponent> 

Das Zeug zwischen den Komponenten Tags sind die "Kinder". Die untergeordneten Elemente werden während der Instantiierung an Ihre Komponente übergeben (props.children). Es liegt an der Komponente, diese untergeordneten Elemente zu rendern. Der Grund, warum Sie wahrscheinlich erwarten, dass die Kinder automatisch gerendert werden, liegt daran, dass React <ReactComponents> anders behandelt als <normal-dom-elements>.

Wann immer reagieren sieht ein <Tag>, die mit einem Großbuchstaben beginnt, geht davon aus, dass es sich um eine Komponente reagieren ist und im Grunde wandelt diese:

<Tag foo="bar"><div>hello</div></Tag> 

etwas wie folgt aus:

new Tag({ 
    foo: "bar", 
    children: React.createElement('div', null, "hello") 
})