为什么我不能在 ReactJS 中 flexbox 某些元素？答案

【问题标题】：Why can I not flexbox certain elements in ReactJS?为什么我不能在 ReactJS 中 flexbox 某些元素？
【发布时间】：2016-11-28 19:02:39
【问题描述】：

我开始尝试对 react-router 中的 <Link> 元素进行样式设置。

<Link style={{display: 'flex'}}>...</Link>

但它似乎专门剥离了display CSS 属性。有谁知道为什么以及如何解决它？

我遇到了同样的问题

<a style={{display: 'flex', marginTop: '10px'}}>Test link</a>

（结果：仅应用了margin-top: 10px）

编辑： 为了将来参考，我看到这个页面仍然有一些视图：

我真的尝试使用多个特定于供应商的display CSS 属性，而不仅仅是单个flex 属性值，所以我现在意识到这个问题非常模糊......

问题在于 ReactJS 团队改变了他们解析内联样式中的 CSS 属性的方式，我们“所有人”真正依赖于 ReactJS 的未记录（内部）代码。所以这曾经有效：

<div style={{'display': ['flex', '-webkit-flex']}}>
    ...
</div>

但这不再是了，因为他们更新了那部分代码。

有关更多详细信息，请参阅例如https://github.com/facebook/react/issues/2020

【问题讨论】：

标签： css reactjs flexbox

【解决方案1】：

实际上这对我使用 React 15.2.0 有效：https://jsfiddle.net/s1mpLk26/

var Hello = React.createClass({
  render: function() {
    return <a style={{display: 'flex', marginTop: '10px'}}>Test link</a>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

也许你的版本已经过时了？

编辑： 该问题是由供应商前缀引起的：

{display: 'flex; display: -webkit-box', marginTop: '10px'}

第一个问题是，display 的给定值不起作用。它宁愿是：

{display: 'flex', display: '-webkit-box', …}

但这也不起作用，因为对象中有重复的 display 键。

显然 React 不支持 question 中提到的值的供应商前缀。链接的答案提到 Radium 使您能够将供应商前缀与内联样式一起使用。另一种选择是使用好的 ol' CSS。

顺便说一句。 -webkit- 前缀通常不再需要，如Can i use table 所示。但是，如果您支持 IE10 或 IE11，您可能需要 Autoprefixer 之类的东西为您处理供应商前缀，因为它们对于 flexbox 来说有些复杂（语法在 2012 年发生了变化，IE 仍然需要旧语法）。

【讨论】：

嗯，它确实对您有用（即您的代码有效）。但不适用于我的项目。当然，发现代码比你的例子更深......我该如何调试呢？
你在哪个 React 组件上应用 style？请记住，style 仅在默认情况下应用于<a>、<span> 等常规 DOM 组件时才有效。如果您正在使用像 Link 这样的自定义内容，则该组件应将 style 转发到它呈现的 DOM 组件。
我有一些 JSX，我只是在其中（在容器元素内）附加了一个锚标记（如我在 OP 中给出的示例），但随后 display 属性被剥离。我知道我传递给 JSX 标记中 style 属性的 JS 对象已正确填充。它只是没有被渲染，不知何故......
这确实很奇怪。如果<a> 元素接收到正确的style 作为道具，您能否检查React Developer Tools？
嗯，很奇怪。实际上，在 React 选项卡中，我看到 <Link ...> 设置了 style={ display: ...（我知道通过查看 react-router 的来源，它只会被转发到 <a> 标记），感谢您的提示。

【解决方案2】：

我做了一个使用 react + flexbox 的 codepen

codepen

当使用 flexbox 时，你会一直需要容器，例如：

<div style={{ display: "flex", flexDirection: "column" }}> ... </div>

子元素也可以是容器，例如：

<div style={{ display: "flex", flexDirection: "row" }}> 
    <div style={{ display: "flex", flex:1 }}> 
        <Link />
    </div>
 </div>

通知flex:1 伸缩子项

在 flexbox 上查看此文档 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

display: 'flex' 是一个 container 的属性，该容器随后包含“弹性项目”——而不是您似乎试图应用它的单个元素。

【讨论】：

您可以根据规范使用“无处不在”的锚标签，是的，我正在制作一个元素容器，基本上可以点击。