呼び出し元コンポーネントの同じ小道具を使用

Question

私のコードの目的は、propertiesをInputGroup.jsにして、this.propsの最下位レベルのコンポーネントTextInput.js, Checkbox.jsなどにすることです。

は、これを行うために、私はInputComponent.jsと呼ばれる非常に簡単なコンポーネントを作成し、私はここでやっていることはthis.prptを作成し、それがTextInput.jsでthis.propsを代わりに使用することができるように、それにthis.propsを割り当てることです。

私は冗長であるように見えると私はより良い方法があると思いますが、これを行うには良い方法があるのだろうか。

ナッツの殻には、this.props,on TextInput.jsはthis.props.propertiesまたはthis.props.dataとは異なります。

---

InputGroup.js着信INPUT_TYPE値に対応する構成要素に

InputGroup.js

作品。

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] 私はそれを修正するように私の質問のタイトルは、ポイントを説明していないと思います。

---

[EDIT] は今、私はので、私はタイトルを修正し、よく知られてソリューションを追加し、これについて理解していました。

`` `

InputGroup.js - 私はあなたがこのような何かを探していると思う

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

を編集します。

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