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

Question

我试图通过状态检查设置内联css样式，但它返回[object Object]，如何使其工作？我是React的新手，并不真正理解这次回归。

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

预期(例如)：styles="margin-bottom: 100px"

电流：styles=[object Object]

Answer 1

styles={｛scrolltop>height？marginBottom:${margin}px:"}｝试试这个。

Answer 2

HTML元素没有styles属性，因此它被转换为expando属性，该属性是一个字符串(除了您可能编写的一些假设的其他JS之外，所有内容都会忽略它)。

您要查找的道具是style(单数)，它确实将对象作为其值。

Answer 3

它返回了一个对象，因为你在花括号之间创建了样式，你需要用这种方式编写样式

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