プロパティのリストを使ってリアクションフォームをレンダリングする

Question

まず、リアクションで表面を傷つけていると言いたいので、この質問が馬鹿馬鹿しくて明白なように見える場合は、お詫び申し上げます。

いくつかのフィールドで連絡先フォームを作成したいと思います。そのフィールドを使用してインターフェイスを表示したいとします。ただ、このように：

名前 [____________]

メール [____________]

パスワード [___________]

等...

私はコード（index.jsxを反応させます）：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { fromJS } from 'immutable'; 
import { compose, createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import { combineReducers } from 'redux-immutable'; 
import { logger } from './middleware'; 
import styles from './main.css'; 

var BillingLabel = React.createClass({ 
    render: function() { 
    return (<b>First Name</b>); 
    } 
}); 

var BillingInput = React.createClass({ 
    render: function() { 
    return (
     <form> 
      <input 
       type="text" 
       placeholder="First name" 
      /> 
     </form> 
    ); 
    } 
}); 

var BillingOption = React.createClass({ 
    render: function() { 
    return (
     <div> 
      <BillingLabel/> 
      <BillingInput/> 
     </div> 
    ); 
    } 
}); 

var OPTIONSFORM = [ 
    {labelOption: 'First Name', placeholder: 'First name'}, 
    {labelOption: 'Last Name', placeholder: 'Last name'}, 
    {labelOption: 'Website', placeholder: 'Store website'}, 
    {labelOption: 'Email', placeholder: 'Email contact'}, 
    {labelOption: 'Password', placeholder: ''}, 
    {labelOption: 'NIF', placeholder: ''}, 
]; 

ReactDOM.render(
    <BillingOption/>, 
    document.getElementById('payment-system') 
); 

私はインターフェイスについて、このように考えた：

BillingOption

• BillingLabel
• BillingInput

各オプションは、ラベルや入力ボックスで構成されています。

私は、インターフェイスをループしてすべてのBillingOption（この場合は6個）をビルドします。私はこれまでにレンダリングされたFirst Name + Inputを持っています。どのように私は6つすべてをレンダリングするためにトラフをループすることができますか？

ありがとうございます。

Answer 1

親子通信を行い、コンポーネント間でデータを変換するには、propsを使用する必要があります。 fiddle：

var BillingLabel = React.createClass({ 
    render: function() { 
    return (<b>{this.props.label}</b>); 
    } 
}); 

var BillingInput = React.createClass({ 
    render: function() { 
    return (
     <form> 
      <input 
       type="text" 
       placeholder={this.props.placeHolder} 
      /> 
     </form> 
    ); 
    } 
}); 

var BillingOption = React.createClass({ 
    render: function() { 
    const form = this.props.options.map((option, i) => { 
     return (
      <div key={i}> 
       <BillingLabel label={option.labelOption}/> 
       <BillingInput placeholder={option.placeholder}/> 
      </div> 
     )}) 
    return (
     <div>{form}</div>  
    ); 
    } 
}); 

var OPTIONSFORM = [ 
    {labelOption: 'First Name', placeholder: 'First name'}, 
    {labelOption: 'Last Name', placeholder: 'Last name'}, 
    {labelOption: 'Website', placeholder: 'Store website'}, 
    {labelOption: 'Email', placeholder: 'Email contact'}, 
    {labelOption: 'Password', placeholder: ''}, 
    {labelOption: 'NIF', placeholder: ''}, 
]; 

ReactDOM.render(
    <BillingOption options={OPTIONSFORM}/>, 
    document.getElementById('container') 
);