在 React 中，如何将动态变量传递给 const CSS 样式列表？

Question

我正在使用 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 将 files[0].preview 传递给样式 dropzoneStyle？

Answer 1

假设files[0].preview returns一个文件（图像）URL，你应该可以设置一个新的样式并将它传递给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`
  };
}

Answer 2

我通常只是将样式定义为returns样式对象的箭头函数，并传入样式所需的任何参数。有一个 shorthand 表示法用于从箭头函数返回一个对象字面量，非常适用于此。

const style = () => ({});

请记住仅在使用 shorthand 时使用三元运算符，否则您只需要显式 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>
);

在 React 中，如何将动态变量传递给 const CSS 样式列表？

In React, how to pass a dynamic variable to a const CSS Style list?

reactjs

react-dropzone