将jsx变量反应到元素内联样式不起作用答案

【问题标题】：React jsx variable to element inline style not working将jsx变量反应到元素内联样式不起作用
【发布时间】：2019-01-16 05:53:28
【问题描述】：

这是我的反应代码

const styles = {
  section: {
    paddingTop: '75px',
    paddingBottom: '3em',
  },
  loaderStyle: {
    zIndex: '999',
    height: '20em',
    width: '2em',
    overflow: 'show',
    margin: '12em auto auto auto',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
};
return (
  <div styles={styles.section}>
    <div styles={styles.loaderStyle} /> .......

反应渲染

<div styles="[object Object]">
 <div styles="[object Object]">

为什么样式值是 [Object Object] ？是我的错吗？如何将 jsx 变量应用于 html 样式？

【问题讨论】：

另外，您不需要在 loaderStyle 对象的末尾和括号外添加额外的逗号
@sjdm 真的吗？谢谢你的提示，我尝试为你的答案修复代码
@sjdm 多行对象和数组文字中的尾随逗号是许多人（和样式指南）的首选，因为它们可以使差异更清晰。
@JordanRunning 不知道，一直认为它不干净
@JordanRunning 嗯...所以我的代码是对的？不再需要触摸？

标签： reactjs jsx

【解决方案1】：

你想要style，而不是styles。

<div style={styles.section}>
  <div style={styles.loaderStyle}/>

【讨论】：

几分钟前，醒了我的问题谢谢你的回答！加油！
@Qfactor 如果我的回答解决了您的问题，请将其标记为已接受。不过，请随时等待其他答案。
是的，我尝试接受答案，但系统说 10 分钟后可用接受...等待分钟..