为什么内联样式在 React JSX 中返回 [object Object]？答案

【问题标题】：Why inline styles returns [object Object] in React JSX?为什么内联样式在 React JSX 中返回 [object Object]？
【发布时间】：2022-06-12 21:45:05
【问题描述】：

我正在尝试使用状态检查设置内联 css 样式，但它返回 [object Object]，如何使其工作？我是 React 新手，不太了解这个返回值。

      <section
        className="header__banner"
        styles={scrolltop > height ? { marginBottom: `${margin}px` } : ""}
        ref={refHeaderBanner}
      >

期望（例如）：styles="margin-bottom: 100px"

当前：styles=[object Object]

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

styles={{scrolltop > height ?边距底部：${margin}px：“”}} 试试这个。

【讨论】：

【解决方案2】：

HTML 元素没有styles 属性，因此它被转换为一个字符串expando-attribute（除了你可能编写的一些假设的其他JS 之外，它会被所有东西忽略）。

您正在寻找的道具是style（单数），它确实将对象作为其值。

【讨论】：

【解决方案3】：

它返回一个对象，因为你在大括号之间写了样式，你需要这样写样式

<section
      className="header__banner"
      style={scrolltop > height ? `margin-bottom: ${margin}px` : ""}
      ref={refHeaderBanner}
>

【讨论】：

现在我得到了预期的结果，但没有应用边距。值应该在引号之间吗？