arabirim durumları ve

Question

arabiriminde bulunan provalar Ben de hem yazı tipini kullanan hem de tepki veren ve her ikisinde yeni olan bir proje üzerinde çalışıyorum. Sorularım, yazı tipindeki arayüzler ve bunların sahne ve durumlarla nasıl ilişkili olduğu. Gerçekte ne oluyor? Arabirim tanıtıcıları ve durumları bildirmedikçe uygulamam çalışmaz, ancak tepki yapıcı işlevini kullanarak durumları kullanıyorum ve bu bilgilerin tümünün 'arabirim MyProps' veya 'arabirim MyStates'e gireceği örnekleri gördüm. örnek (sadece burada yayınlamak için bu .tate'deki içeriği kaldırdım). Neden arayüze ihtiyacım var? Bunu yapmak için doğru yol ne olurdu, çünkü ben bunu bir şekilde düşünüyoruz, tsx yöntemiyle değil.

Answer 1

Size tam olarak ne soruyorsun temizleyin ama değil:

sahne: bileşenin ebeveynden geçirilen ve bir bileşen kendi sahne var değişmemelidir anahtar/değer çiftleri vardır, sadece tepki ana bileşenden sahne değişikliklerine.

durum: sahne gibi kimi ama setState yöntemini kullanarak bileşenin kendisinde değişiklik yapılmıştır. Sahne veya durum değiştiğinde, render yöntemi

yöntemidir. typescript kısmına gelince

, React.Component senin örneğin daha gibi görünmelidir, jenerik olarak iki tür, sahne diğeri eyalet için bir sürer:

interface MyProps {} 

interface MyState { 
    hero: string; 
    whatIs: string; 
    aboutOne: string; 
    aboutTwo: string; 
    testimonial: string; 
    footer: string; 
} 

class Root extends React.Component <MyProps, MyState> { 
    constructor(props) { 
     super(props); 

     this.state = { 
      // populate state fields according to props fields 
     }; 
    } 

    render() { 
     return (
      <div> 
       <NavBar/> 
       <Jumbotron content={ this.state.hero } /> 
       <ContentPanel content={ this.state.whatIs } /> 
       <ContentPanel content={ this.state.aboutOne } /> 
       <ContentPanel content={ this.state.aboutTwo } /> 
       <ContentPanel content={ this.state.testimonial } /> 
       <Footer content={ this.state.footer } /> 
      </div> 
     ) 
    } 
} 

Gördüğünüz gibi, MyState arayüzü Daha sonra this.state üyesinde kullanılan alanları tanımlar (tüm dizeleri yaptım, ancak istediğiniz herhangi bir şey olabilir).

Bu alanların aslında sahnede olmamasına ve olmayacağına emin değilim.