React Dynamic Html Tags

Question

私は、この反応コンポーネントがTextInputを参照していると言います。 私は次のように投げるの小道具を渡されると、しかし、私のレンダラは、要素の上に余分なものを持って、このコンポーネントは

<input type="text">と同様<textarea>が、それには何IFSと一緒にいたい：

render() { 
     return (
      <label> 
      <strong>{this.props.name}</strong> 
       <input type="text" ref={ component => { this.input = component; } } name={this.props.name} onChange={this.handleChange} value={this.state.value} /> 
      </label> 
    ) 
    } 

を

私のオリジナルのアイデアは、だから私の要素に、私は単に

としてこれをレンダリングするwoulこの

myInputProps = { type: (<input type="text"/>) } 

のようなものをやっていました0

{this.props.type} 

しかし、どのようにしてref、name、onchangeなどの要素にすべての余分なものを渡すことができますか？この問題にはどんな良いアプローチがありますか？いくつかのifsを実行して、コンポーネントの状態などに応じてレンダリングする必要があるかどうかを確認できますが、それがベストであるかどうかはわかりません。

Answer 1

何が必要です：

render() { 
    var input = this.props.type; 
    input.props = { 
     ...input.props, 
     ref: (component) => { this.input = component;}, 
     onChange: this.handleChange, 
     value: this.state.value 
    }; 

    return (
     <label> 
      <strong>{this.props.name}</strong> 
      {input} 
     </label> 
) 
} 

Answer 2

render() { 
    return (
     <label> 
     <strong>{this.props.name}</strong> 
      {this.props.children} 
     </label> 
)} 

Answer 3

私は別の<TextInput>と<TextArea>コンポーネントを使用して提唱していますが、本当にflexiblityが必要な場合は、小道具のレンダリングを使用したい：render小道具を使用して

を：

render() { 
     const props = { 
      ref: component => this.input = component, 
      name: this.props.name, 
      onChange: this.handleChange 
     }; 
     return (
      <label> 
      <strong>{this.props.name}</strong> 
       { this.props.render(props) } 
      </label> 
    ) 
    } 

それが好き：

<TextInput name="foo" render={ props => <input ...props /> } />