在 React/Typescript JSX 中渲染 iframe 的 style 属性是一个对象，但其他属性是字符串。样式怎么写？答案

【问题标题】：The style attribute for rendering iframe in React/Typescript JSX, is an object, but other attributes are strings. How to write the styles?在 React/Typescript JSX 中渲染 iframe 的 style 属性是一个对象，但其他属性是字符串。样式怎么写？
【发布时间】：2022-09-28 04:22:08
【问题描述】：

我试图在我的 JSX 中传递从组件返回的 iframe 标记。 allow=\"...\" 似乎作为字符串工作，但 style=\"....\" 给出了 JSX 错误，需要映射，而不是字符串。

return(
  <Rnd
  style={style.casualGameContainer}
  default={{
    x: 10,
    y: 10,
    width: 810,
    height: 610,
    zIndex: 21,
  }}
  >
    <iframe id=\"iframe\" title={gameInfo.name} name={gameInfo.name} src={gameInfo.url}
     allow=\"display-capture;camera;microphone;fullscreen;payment;\"
     referrerpolicy=\"\" frameborder=\"0\" width=\"100%\" height=\"100%\"
     style={{zIndex:\'21\', border:\'1px,solid,white\'}}>
    </iframe>
  </Rnd>
  );

const style = StyleSheet.create({
   casualGameContainer: {
    width: \'100%\',
    height: \'74.12%\',
    flexDirection: \'row\',
    zIndex: \'200\',
  },

以上通过 zIndex（将其转换为 z-index: 21）但不通过边界。并且 z-index 在 iframe 中没有影响。（并且 z-index 也没有传递给 Rnd 元素。

编辑：事实证明 Rnd 不能接受样式表。我不得不更改为一个对象：

const style = {
    width: \'100%\',
    height: \'74.12%\',
    flexDirection: \'row\',
    zIndex: \'21\',
};

标签： css reactjs iframe react-native-stylesheet

【解决方案1】：

这里的问题实际上只是您为边框提供的语法不是有效的 CSS

如果你用纯 CSS 做这个，你就不会写

.some-element {
  border: 1px,solid,white;
}

你会写

.some-element {
  border: 1px solid white;
}

因此，您应该将 style 属性更改为：

style={{zIndex: '21', border: '1px solid white'}}

【讨论】：

是的，修复了边界谢谢！我仍然很困惑为什么 iframe JSX 与其他标签不同。例如<查看>。例如，它不接受对象列表（带逗号），即使在属性之间也必须使用空格。