我正在使用react-dropzone来允许用户上传个人资料照片。
我像这样定义自定义CSS:
const dropzoneStyle = {
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
};
在渲染DropZone输入的方法中,我可以检测到它们是否是用户选择要上传的图像后填充的文件预览。
我想要做的是,如果file.preview存在,请将file.preview发送到dropzoneStyle,以便将背景图像添加到CSS中。
const renderDropzoneInput = (field) => {
const files = field.input.value;
let dropzoneRef;
if (files[0]) {
console.log(files[0].preview)
}
return (
<div>
<Dropzone
name={field.name}
ref={(node) => { dropzoneRef = node; }}
accept="image/jpeg, image/png"
style={dropzoneStyle}
>
如何使用React将文件[0] .preview传递给样式dropzoneStyle?
由于
答案 0 :(得分:5)
我通常只将样式定义为返回样式对象的箭头函数,并传入样式所需的任何参数。有一个简写符号表示从箭头函数返回一个对象文字,该函数可以很好地用于此。
const style = () => ({});
请记住,如果使用速记,只使用三元运算符,否则您只需要明确return
一个对象。
所以,对你的风格:
const dropzoneStyle = (isPreview) => ({
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
backgroundImage: (isPreview) ? 'url(/path/to/image.jpg)' : 'none',
});
这样添加的图像isPreview
为真,但如果没有则保持空白。
然后在你的组件中,调用样式所在的函数:
return (
<div>
<Dropzone
{...otherProps}
style={ dropzoneStyle(isPreview) }
>
</div>
);
答案 1 :(得分:2)
假设files[0].preview
返回文件(图片)网址,您应该能够设置新样式并将其传递给Dropzone
组件。
这些方面的东西:
const renderDropzoneInput = (field) => {
const files = field.input.value;
let dropzoneRef;
render() {
let dropzoneStyle = {
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
};
if (files[0]) {
dropzoneStyle = {
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
backgroundImage: `url(${files[0].preview})`,
// or to use a fixed background image
// backgroundImage: `url(/path/to/static/preview.png)`,
backgroundPosition: `center center`,
backgroundRepeat: `no-repeat`
};
}
return (
<Dropzone
name={field.name}
ref={(node) => { dropzoneRef = node; }}
accept="image/jpeg, image/png"
style={dropzoneStyle}
/>
)
}
}
可以使用扩展运算符来稍微干掉这段代码:
let dropzoneStyle = {
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
};
if (files[0]) {
dropzoneStyle = {
...dropzoneStyle,
backgroundImage: `url(/path/to/static/preview.png)`,
backgroundPosition: `center center`,
backgroundRepeat: `no-repeat`
};
}