在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？

- AnApprentice

Answer 1

我通常将样式定义为一个返回样式对象的箭头函数，并传递所需的任何参数。有一种简写符号可用于从箭头函数返回对象字面量，这对此很有效。

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

- Joe Dalton

---

我喜欢这个想法，但它会返回一个控制台错误：“警告：Dropzone的类型为function的style属性无效，应该为object。” - AnApprentice

@AnApprentice 你是在将样式作为函数调用吗？比如使用 dropzoneStyle() 而不是 dropsoneStyle？ - Joe Dalton

我认为问题在于react-dropzone定义了proptypes并且希望样式是一个对象而不是一个函数。 - AnApprentice

哦，好的。如果你需要在其他地方使用逻辑来设置样式，我认为这是一种相当干净的方式。 - Joe Dalton

完全同意。我希望我能在这里使用它。再次感谢您的帮助！ - AnApprentice

@JoeDalton。嗨，你的解决方案也帮了我很多。只是我还想问一件事。使用这个变量styled，是否可以为first-child或nth-child添加CSS属性？类似于span:first-child { border-radius: 15px 0 0 15px }？ - program_bumble_bee

Answer 2

假设files [0] .preview返回一个文件（图像）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`
  };
}

- Brett DeWoody

---

谢谢，这个很好用。有没有办法让代码更简洁，避免重复的样式？ - AnApprentice

我正在按照你的要求添加那个。很棒的想法！ - Brett DeWoody

哦，那太棒了。谢谢你。 - AnApprentice