mit gleichen Requisiten der Anrufer-Komponente

Question

Das Ziel meines Codes ist es, die properties in InputGroup.jsthis.props in den niedrigsten Komponenten TextInput.js, Checkbox.js, und so weiter zur Verfügung zu stellen.

Um dies zu tun, erstelle ich eine sehr einfache Komponente namens InputComponent.js, und was ich hier tun, ist this.prpt zu erstellen und this.props zuweisen, so dass es statt this.props in TextInput.js verwendet werden kann.

Ich scheine ausführlich zu sein und ich denke, es gibt einen besseren Weg, aber ich frage mich, ob es einen besseren Weg gibt, dies zu tun.

In einer Nussschale, möchte ich this.props, verwenden on TextInput.js nicht this.props.properties oder this.props.data mögen.

---

InputGroup.js

InputGroup.js Arbeiten an der Komponente auf den eingehenden INPUT_TYPE Wert entspricht.

import React, { Component } from 'react'; 
import {INPUT_TYPES as T} from './constants'; 
import {TextInput, CheckboxInput, SelectInput, MobileInput, DateInput, SnsAuthInput} from '.'; 

class InputGroup extends Component { 

    constructor(props){ 
     super(props); 
    } 

    render() { 
     let input_type = this.props.type; 
     let switcher = { 
      [T.TEXT]: TextInput, 
      [T.CHECKBOX]: CheckboxInput, 
      [T.SELECT]: SelectInput, 
      [T.MOBILE]: MobileInput, 
      [T.DATE]: DateInput, 
      [T.SNSAUTH]: SnsAuthInput 
     } 
     let TagName = (input_type < Object.keys(switcher).length) ? switcher[(input_type)] : undefined; 
     if (TagName) { 
      return <TagName properties={this.props} /> 
     } 
     return <div></div> 
    } 
} 

InputComponent.js

import React, { Component } from 'react'; 

class InputComponent extends Component { 

    constructor(props){ 
     super(props); 
     this.prpt = this.props.properties; 
    } 
} 

export default InputComponent ; 

TextInput.js

import React, { Component } from 'react'; 
import InputComponent from './InputComponent'; 

class TextInput extends InputComponent { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     let {input_id, text, isRequired, error} = this.prpt; 
     return (
      <div className="input-group input-text"> 
       <label htmlFor={input_id} className="blind">{text}</label> 
       <input type="text" id={input_id} placeholder={text} required={isRequired}/> 
       <span className="id-error">{error}</span> 
      </div> 
     ); 
    } 
} 

export default TextInput ; 

---

[EDIT] ich glaube, meine Frage Titel so nicht den Punkt beschreibt, dass ich es korrigiert.

---

[EDIT] Nun ich dies verstanden, so korrigiere ich den Titel und fügen Sie gut bekannte Lösung.

`` `

InputGroup.js - Bearbeiten

class InputGroup extends Component { 

    constructor(props){ 
     super(props); 
    } 

    render() { 
     let input_type = this.props.type; 
     let switcher = { 
      [T.TEXT]: TextInput, 
      [T.CHECKBOX]: CheckboxInput, 
      [T.SELECT]: SelectInput, 
      [T.MOBILE]: MobileInput, 
      [T.DATE]: DateInput, 
      [T.SNSAUTH]: SnsAuthInput 
     } 
     let TagName = (input_type < Object.keys(switcher).length) ? switcher[(input_type)] : undefined; 
     if (TagName) { 
      return <TagName {...this.props} /> 
     } 
     return <div></div> 
    } 
} 

Answer 1

Ich glaube, Sie suchen so etwas wie.

<Parent propX={x} propY={y} /> 
    <Child {...props} />