2016-03-19 29 views
1

React için çok yeniyim ve çok fazla bitmiş olabilir.Çoklu bileşenleri işleme

Uygulamamda, bir belge oluşturucu (mailchimp'de e-posta oluşturma gibi bir tür) yapmaya çalışıyorum. Bir öğenin simgesine tıkladığınızda, bu öğenin işaretlemesi belge sayfasına eklenir.

Kavramsal olarak, bunu React'ta yapmanın en iyi yolundan emin değilim. Sorularım şunlardır:

  • Belgeye hangi öğelerin eklendiğini nasıl takip ediyorsunuz?
  • Durumu uygulama düzeyinde mi yönetirim?
  • Sonunda, kullanıcının belgeye eklenen her bir öğenin stillerini özelleştirmesini istiyorum, bu kod nerede olmalıdır?
  • Verilerin ve işlevlerin sırası gibi görünüyor (bazen bu sipariş değiştiğinde kırılıyor). Bunu organize etmenin daha iyi bir yolu var mı?

Şimdilik, bunu ayarlamak için 'tepki' yolu ile ilgili herhangi bir tavsiye takdir edilecektir.

Benim asıl 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') 
); 

cevap

1

yolu devlet tüm değişiklikleri işleyen bir konteyner bileşenini kullanmak olacaktır tepki gösterirler.

Ayrıca her bileşeni, devlet

Soruları değiştirmek için kullanabileceğiniz bir yaşam döngüsü ve yaşam döngüsü yöntemleri vardır:

  • nasıl belgeye eklenmiş olan hangi unsurlar izlerim?

Bu componentDidMount() ile yapılabilir

  • Ben uygulama düzeyinde devlet yönetiyor musunuz?

Evet

  • Sonunda, kullanıcı belgeye eklenen her elemanın stilleri özelleştirmek gerekecektir, nerede bu kod yaşamak gerekir?

Onun size kalmış, sen Veri ve işlevleri konularında (bu bazen sonları sırasına gibi görünüyor farklı bir dosyaya

  • den/ithalat stilleri inline stilleri 'yazmak ya gerektirebilir sipariş değişiklikleri). 'u düzenlemenin daha iyi bir yolu var mı?

Evet, konteynerlerin üzerinde

aşağıya bakın:

: Burada


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

olan yaşam döngüsü üzerine tepki dokümanlar ilgili bağlantılar

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

+0

İyi bilgi, teşekkür ederim! Sanırım daha fazla stil sorusu, belgeye eklenebilecek unsurların şablon olması gerçeğiyle ilgilidir. Örneğin, her biri farklı stilleri olan her belge için birden çok metin bloğu olabilir. Yani satır içi stilleri gitmek için yoldur, ancak bu verileri nerede saklayacağımı bilmiyordum. Bir 'createdElements' dizisi oluşturmayı ve ona stil verisi eklediğimi tahmin ediyorum. – xEmptyCanx

+0

Sorun yok! Memnuniyetle yardım ettim. Stilleri için ayrı bir dosyaya sahip olmaktan hoşlanıyorum, sadece bileşeninizdeki içeriğe aktarılan bir javascript nesnesi ve bunu sadece bileşeninize iletebilirsiniz: 'var transparentBG = require ('../ styles'). trasparentBG' sonra bileşen: ' ' - modules.exports = styles; – JordanHendrix

+0

Ah, bunu yapmanın iyi bir yolu olmalı. Ben js geliştiriciden daha çok bir web tasarımcısıyım, bu yüzden stilleri ayrı dosyalarda olmaktan çok seviyorum. Reaksiyonun tek kısmı hakkında emin değilim. – xEmptyCanx