引导类在 ReactJS 组件中不起作用

Posted

技术标签:

【中文标题】引导类在 ReactJS 组件中不起作用【英文标题】：Bootstrap classes do not work in ReactJS component 【发布时间】：2015-03-08 10:58:21 【问题描述】：

我刚开始学习使用 ReactJS 来呈现视图，但我发现如果我将属性直接插入到 ReactJS 组件中，引导 CSS 类不会按预期工作。例如，在下面的代码中，我希望生成一个具有以下类的面板：panel-default 和 panel-heading；但是，生成的视图不带有引导样式。我想知道为什么以及如何解决，如果可能的话。请注意，我已经编译了我的 ReactJS 代码并将编译后的 JS 包含在 html 代码中（见底部）。

var taxonGroups = 
  identifier: 'ABC-x981',
  sources: [
    segmentName: 'segment1', length: 1090,
    segmentName: 'segment2', length: 98,
    segmentName: 'segment3', length: 2091,
    segmentName: 'segment4', length: 1076,
  ],

  fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],

  collectionDate: '2001-09-10'
;

var Taxon = React.createClass(
  render: function() 
    return (
      <div class="panel panel-default"> <div class="panel-heading"><p>this.props.data.identifier</p></div>
        <table class="table table-bordered table-striped table-hover">
              
                this.props.data.sources.map(function(source) 
                  return <Segment name=source.segmentName length=source.length/>
                )
                
          </table>

      </div>
    );
  
);


var Segment = React.createClass(
  render: function() 
    return <tr><td>this.props.name</td><td>this.props.length</td></tr>
  

  );

React.render(<Taxon data=taxonGroups />, document.getElementById('container'));

HTML 代码：

<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/react/react.js"></script>
  <script src="bower_components/react/JSXTransformer.js"></script>
  <title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>

<div id="container">

</div>

<div class="panel panel-default">
  <div class="panel-heading">This is Panel Heading!</div>
  <div class="panel-body">
    This is panel body
  </div>
</div>


<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>

【问题讨论】：

【参考方案1】：

在 React 中，属性是 className，而不是 class。因此，例如，而不是拥有 

<div class="panel panel-default">

你应该有

<div className="panel panel-default">

通过将其设置为class，React 会忽略该属性，因此生成的 HTML 不包含 CSS 需要的类。

如果您通过compiler 运行预期的HTML，那确实是您得到的。

【讨论】：

感谢为我解决了这个问题。 谢谢！很好的解释。【参考方案2】：

我在学习 React 教程时遇到了类似的问题，我正在写作

<div classname="my bootstrap code here">

而不是

<div className="my bootstrap code here">

className 对于 jsx 应该是驼峰式的。希望这会有所帮助:)。

【讨论】：

以上是关于引导类在 ReactJS 组件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

从子组件更新父状态在 reactjs 中不起作用

引导模式在 React JS 中不起作用

为啥某些 Tailwind 类在 JetStream 中不起作用？

window.onmessage 在反应 js 组件中不起作用

自定义 CSS 类在 WordPress 中不起作用

活动菜单类在 wordpress 中不起作用