在react.js中使用道具的背景

Question

通過在輸入中傳遞變量即validUrl來添加背景。任何人都可以告訴我這background屬性是否有效。同時導入有效和無效的圖像。

background: ${ props => props.validUrl ? "url(${valid}) no-repeat left 10px center" : "url(${invalid}) no-repeat left 10px center" }; 

Answer 1

這是它是如何完成的，我們需要傳遞變量在外部包裝。如果在輸入中定義它，那麼根據屬性的樣式需要在input.js中從其被調用的位置定義。更新代碼如下：

const URLField = ({ validUrl}) => (
<Wrapper validUrl={validUrl}> 
    <Urlwrapper> 
     <Input /> 
     <Text>{domain}</Text> 
    </Urlwrapper> 
</Wrapper> 
); 

Answer 2

寫像這樣使用Template literals：

background: props.validUrl ? `url(${valid}) no-repeat left 10px center` : `url(${invalid}) no-repeat left 10px center` 

更新：

Stories storiesOf("URLField", module) .add("default",() => ( 
    <ThemeProvider theme={theme}> 
     <URLField validUrl={true} /> 
    </ThemeProvider>) 
) 

const URLField = ({validUrl}) => ( 
    <Wrapper> 
     <Urlwrapper> 
      <Input validUrl={validUrl} /> 
      <Text>{urlDescription}</Text> 
     </Urlwrapper> 
    </Wrapper> 
);