Stilli bileşenler temaProvider

Question

Bu github project başvuruyor ve KeyPad.js bileşeninin basit bir test yazmaya çalışıyorum.

Bu konuda açılan sorunları gördüm ve önerilen bir çözüm temayı bileşenlere uygun olarak aktarmaktır. Bu çözüm enzim ile çalışmaz.

Benim durumumdaki sorun, çocukların bileşenlerinin ThemeProvider aracılığıyla temayı alması ve test çalışmalarını yapabilmeleri için herkese tema desteği eklemem gerekmesi.

Örnek:

const tree = renderer.create(
     <KeyPad 
      theme={theme} 
      cancel={()=> true} 
      confirm={()=> true}    
      validation={()=> true} 
      keyValid={()=>true} /> 
    ).toJSON(); 
     expect(tree).toMatchSnapshot(); 

tuş takımı en kılmak yöntem, böyle değiştirmek tema ile bu çözüm gibi değil yapmak her yerde

render() { 
     let { displayRule, validation, label, confirm, cancel, theme, keyValid, dateFormat } = this.props 
     return (
      <Container theme={theme}> 
       <Content theme={theme}> 
        <Header theme={theme}> 
         <CancelButton theme={theme} onClick={cancel}> 
          <MdCancel /> 
         </CancelButton> 
         <Label>{label}</Label> 
         <ConfirmButton theme={theme} onClick={() => confirm(this.state.input)} disabled={!validation(this.state.input)}> 
          <MdCheck /> 
         </ConfirmButton> 
        </Header> 
        <Display 
         theme={theme} 
         value={this.state.input} 
         displayRule={displayRule} 
         dateFormat={dateFormat} 
         cancel={this.cancelLastInsert} /> 
        <Keys> 
         {[7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '.'].map(key => (
          <Button 
           theme={theme} 
           key={`button-${key}`} 
           theme={theme} 
           click={(key) => this.handleClick(key) } 
           value={key} 
           disabled={!keyValid(this.state.input, key, dateFormat)} /> 
         ))} 
        </Keys> 
       </Content> 
      </Container> 
     )  
    } 

desteklemek olacaktır. Bu konuda bana kim yardım edebilir?

Teşekkür

Answer 1

Bu kadarıyla görebiliyordum olarak mükemmel makul. Kitaplıktaki her bileşenin bir teması vardır ve bu şekilde bunu ayarlayabilirsiniz.

Neyse ki bağlamı kullanmaz, aksi takdirde evden daha fazla olabilirsiniz. neden bağlamı kullanmayın: https://reactjs.org/docs/context.html

Sahne ile bunu yapmazsanız, bağlantı bileşenini başka bir dış kütüphaneye gönderirsiniz. örneğin: Redux veya bir mobx mağazası. Bu, artık korkunç görünmesine rağmen, artık gerçek bir bileşen olan

olduğu anlamına gelir. Eğer gerçekten ayrı bir bileşen yapmak istiyorsanız gitmek için yoldur.

Answer 2

Sadece geri bildirimin props bağımsız değişkenini yok eder ve theme için bir varsayılan değer eklerim. Bu şekilde, theme'dan erişebileceğiniz herhangi bir pervane Cannot read property ... of undefined ile atmayacak ve undefined döndürecektir. Stillerinizi dağıtacaktır ancak ünite testlerinde bunun hakkında çok fazla şey düşünmediğinizi düşünmüyorum.

... 
color: ${({ theme = {} }) => theme.background}; 
...