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