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> 
);