Question

通过在输入中传递变量即validUrl来添加背景。有人告诉我这个background属性是否有效。还导入了有效和无效的图像。

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

Answer 1

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

Answer 2

这就是我们需要在外层包装器中传递变量的方法。如果它在输入中定义，则根据属性的样式需要在input.js中定义，从中调用它。更新后的代码如下：

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

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

2 个答案: