Question

我开始尝试设置<Link>中的react-router元素。

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

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

我遇到了与

相同的问题

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

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

修改为了将来参考，我看到这个页面仍然有一些观点：

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

问题是ReactJS团队改变了他们在内联样式中解析CSS属性的方式，而我们“all”真的依赖于ReactJS的无证（内部）代码。所以这曾经工作过：

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

但现在不再这样了，因为他们更新了这部分代码。

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

Answer 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允许您使用带有内联样式的供应商前缀。另一种选择是选择好的CSS。

顺便说一下。通常不再需要-webkit-前缀，如Can i use table所示。但是，如果你支持IE10或IE11，你可能会想要像Autoprefixer这样的东西为你处理供应商前缀，因为它们对于flexbox来说有点复杂（语法改变了2012，IE仍然需要旧的语法）。

Answer 2

this.props是容器的属性，然后包含＆＃34; flex项目＆＃34; - 不是单个元素，因为您似乎尝试应用它。

Answer 3

我制作了一个使用react + flexbox

的codepen

codepen

使用flexbox时，您将始终需要容器，例如：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="dashboard">
  <div id="chart_div"></div>
  <div id="control_div"></div>
</div>

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

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

注意<div style={{ display: "flex", flexDirection: "row" }}> <div style={{ display: "flex", flex:1 }}> <Link /> </div> </div>用于展示子项目

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

为什么我不能在ReactJS中弹性化某些元素？

3 个答案: