为什么我不能在ReactJS中对某些元素进行Flexbox? [英] Why can I not flexbox certain elements in ReactJS?

问题描述

我开始尝试从 react-router 设置< Link> 元素的样式.

I started out trying to style <Link> elements from react-router.

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

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

but it seems like it strips the display CSS property specifically. Does anyone know why and how to fix it?

我也遇到同样的问题

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

(结果:仅应用 margin-top:10px )

供以后参考，正如我所看到的，此页面仍然有一些视图:

For future reference, as I see this page still gets some views:

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

I really tried using multiple vendor-specific display CSS attributes, and not just a single flex attribute value, so I realize now that the question is very vague...

问题在于，ReactJS团队更改了以内联样式解析CSS属性的方式，我们全部"确实依赖于ReactJS的未记录(内部)代码.所以这曾经起作用:

The problem is that the ReactJS team changed the way they parse CSS attributes in inline styles, and we "all" really relied on an undocumented (internal) code of ReactJS. So this used to work:

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

但这已经不复存在了，因为他们更新了代码的那一部分.

But this doesn't anymore, since they updated that part of the code.

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

For further details see e.g. https://github.com/facebook/react/issues/2020

推荐答案

实际上，这对我来说是使用React 15.2.0的: https://jsfiddle.net/s1mpLk26/

Actually this works for me using 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')
);

也许您的版本已经过时了?

Maybe your version is outdated?

此问题是由供应商前缀引起的:

The issue is caused by the vendor prefixes:

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

第一个问题是 display 的给定值不起作用.宁愿是:

The first issue with this is, that the given value for display doesn't work. It would rather be:

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

但是，由于对象中的 display 键重复，因此这也不起作用.

This however also doesn't work, because of the duplicate display key in the object.

显然，React不支持此问题中提到的值的供应商前缀.链接的答案提到Radium使您可以使用内联样式的供应商前缀.另一种选择是使用良好的CSS.

Apparently React doesn't support vendor prefixes for values as mention in this question. The linked answer mentions that Radium enables you to use vendor prefixes with inline styles. The other option is to go with good ol' CSS.

顺便说一句. -webkit-前缀通常不再需要，如中所示表格.但是，如果您支持IE10或IE11，您可能会希望使用Autoprefixer之类的东西来为您处理供应商前缀，因为对于flexbox而言，它们有些复杂(语法更改为2012，IE仍然需要旧语法).

Btw. the -webkit- prefix is usually not necessary anymore, as shown in the Can i use table. However if you support IE10 or IE11 you'll probably want something like Autoprefixer handle the vendor prefixes for you, as they're somewhat complicated for flexbox (the syntax changed 2012 and the old syntax is still necessary for IEs).

这篇关于为什么我不能在ReactJS中对某些元素进行Flexbox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！