複数の要素をレンダリングする

Question

私は非常に反応していて、あまりにも多くビットオフしている可能性があります。

私のアプリでは、ドキュメントビルダー（mailchimpにメールを作成するようなもの）を作ろうとしています。要素のアイコンをクリックすると、その要素のマークアップが文書ページに追加されます。

概念的には、Reactでこれを行う最善の方法はわかりません。私の質問には次のものが含まれます：

• 文書にどの要素が追加されたかをどのように追跡していますか？
• アプリレベルで状態を管理していますか？
• 最終的には、ドキュメントに追加された各要素のスタイルをカスタマイズする必要があります。そのコードはどこにあるべきですか？
• データの順序や機能に問題があるようです（この注文が変更されると破損することがあります）。これを整理するより良い方法はありますか？

今のところ、これを設定するための「反応」方法についてのアドバイスは感謝しています。

私の主なJS：

// --------------------------------------------------------- 
// Elements 
// --------------------------------------------------------- 
var TextBlock = React.createClass({ 
    render: function() { 
     return (
      <p>Lorem ipsum ... laborum.</p> 
     ); 
    } 
}); 

var ImageBlock = React.createClass({ 
    render: function() { 
     return (
      <img src="placehold.it/360x240" alt="Image" /> 
     ); 
    } 
}); 

var HeadingBlock = React.createClass({ 
    render: function() { 
     return (
      <h3>Heading Here</h3> 
     ); 
    } 
}); 

var TableBlock = React.createClass({ 
    render: function() { 
     return (
      <table> 
       ... Table Markup Here ... 
      </table> 
     ); 
    } 
}); 

var ColumnsBlock = React.createClass({ 
    render: function() { 
     return (
      <div class="row"> 
       <div class="col-xs-4">Col 1</div> 
       <div class="col-xs-4">Col 2</div> 
       <div class="col-xs-4">Col 3</div> 
      </div> 
     ); 
    } 
}); 

var Divider = React.createClass({ 
    render: function() { 
     return (
      <hr /> 
     ); 
    } 
}); 

var elementList = [ 
    { 
     'name': 'Text', 
     'icon': 'align-left', 
     'html': <TextBlock /> 
    }, 
    { 
     'name': 'Image', 
     'icon': 'picture-o', 
     'html': <ImageBlock /> 
    }, 
    { 
     'name': 'Heading', 
     'icon': 'header', 
     'html': <HeadingBlock /> 
    }, 
    { 
     'name': 'Table', 
     'icon': 'table', 
     'html': <TableBlock /> 
    }, 
    { 
     'name': 'Column', 
     'icon': 'columns', 
     'html': <ColumnsBlock /> 
    }, 
    { 
     'name': 'Divider', 
     'icon': 'times', 
     'html': <Divider /> 
    }, 
]; 

var Element = React.createClass({ 
    handleClick: function(e){ 
     e.preventDefault(); 
     this.props.handleClick(); 
    }, 

    render: function() { 
     return (
      <li className="element" onClick={this.handleClick}> 
       <i className={'fa fa-' + this.props.icon}></i> 
       <span className="element__name">{this.props.name}</span> 
      </li> 
     ); 
    } 
}); 

var Elements = React.createClass({ 
    getInitialState: function() { 
     return { 
      elementList: elementList, 
     }; 
    }, 

    handleClick: function(index, element){ 
     console.log(element.html); 
    }, 

    render: function() { 
     return (
      <ul className="list-unstyled"> 
       {this.state.elementList.map(function(element, index) { 
        return (
         <Element 
          key={index} 
          handleClick={this.handleClick.bind(this, index, element)} 
          name={element.name} 
          icon={element.icon} 
         /> 
        ); 
       }.bind(this))} 
      </ul> 
     ); 
    } 
}); 

// --------------------------------------------------------- 
// Tabs 
// --------------------------------------------------------- 

var Tab = React.createClass({ 
    handleClick: function(e){ 
     e.preventDefault(); 
     this.props.handleClick(); 
    }, 

    render: function() { 
     return (
      <a className={this.props.isCurrent ? 'btn btn-primary' : 'btn btn-default'} onClick={this.handleClick}> 
       {this.props.name} 
      </a> 
     ); 
    } 
}); 

var Tabs = React.createClass({ 
    handleClick: function(tab){ 
     this.props.changeTab(tab); 
    }, 

    render: function(){ 
     return (
      <div className="text-center"> 
       <nav className="btn-group"> 
        {this.props.tabList.map(function(tab, index) { 
         return (
          <Tab 
           key={index} 
           handleClick={this.handleClick.bind(this, index)} 
           name={tab.name} 
           isCurrent={(this.props.currentTab === index)} 
          /> 
         ); 
        }.bind(this))} 
       </nav> 
      </div> 
     ); 
    } 
}); 

var Settings = React.createClass({ 
    render: function() { 
     return (
      <div>test settings</div> 
     ); 
    } 
}); 

var tabList = [ 
    { 
     'name': 'Content', 
     'content': <Elements /> 
    }, 
    { 
     'name': 'Settings', 
     'content': <Settings /> 
    } 
]; 

var Document = React.createClass({ 
    render: function() { 
     return (
      <article className="document__frame"> 
       <div className="document">test</div> 
      </article> 
     ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      tabList: tabList, 
      currentTab: 0 
     }; 
    }, 

    changeTab: function(index) { 
     this.setState({ currentTab: index }); 
    }, 

    render: function() { 
     return (
      <div> 
       <Document /> 
       <div className="control"> 
        <Tabs 
         currentTab={this.state.currentTab} 
         tabList={this.state.tabList} 
         changeTab={this.changeTab} 
        /> 
        <div className="control__panel"> 
         {this.state.tabList[this.state.currentTab].content} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <App />, 
    document.getElementById('content') 
); 

Answer 1

ザ・ウェイは、あなたの状態変化のすべてを扱うコンテナコンポーネントを使用することであろう反応します。

また、各コンポーネントは、あなたが

ご質問あなたの状態を変更するために使用することができ、ライフサイクルとライフサイクルメソッドがあります。

• どのように文書に追加された要素を追跡するのですか？

このはcomponentDidMount（）で行うことができます

• 私はアプリレベルで状態を管理していますか？

はい

• 結局、私は、ユーザーが がドキュメントに追加された各要素のスタイルをカスタマイズしたいと思う。ここで、そのコードは生きるべき？

そのあなたまで、あなたはそれがデータと機能事項（この時にはそれ 休憩のためのように思える異なるファイル

• から/インポートスタイルを「インラインスタイル」を書いたり、必要とすることができます注文変更）。 これを整理するには良い方法はありますか？

はい、コンテナに

以下を参照してください。

：ここで

---

https://medium.com/@learnreact/container-components-c0e67432e005#.igjce0wof

---

は、ライフサイクル上で反応ドキュメント内の関連リンクです

---

https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods：