- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在 React 中创建一个表(我是 React 的新手),但是我们可以使用 CategoryData 还是应该使用其他东西?它没有正确创建单元格,即它创建的单元格未与 <th>
对齐来自父级的,它们根本没有单元格边框。它还会发出以下警告:
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See Param > tbody > Row > div.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See Row > div > tr.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CategoryData > div > tr.
我不确定为什么会出现这些警告以及为什么表格单元格(来自 CategoryData
)没有对齐并且没有单元格边框。 正确的方法是什么?
代码
var Param = React.createClass({
getInitialState: function() {
return {
isLoading: true,
panelTitle: "",
data: [],
categories: []
}
},
updateState: function() {
var that = this;
var categories = new Set();
rest.getParameters('service').then(function (results) {
for (var i = 0; i < results.data.length; i++) {
categories.add(results.data[i].category);
}
that.setState({
data: results.data,
categories: Array.from(categories)
})
}).catch(function (err) {
console.error('rest.getParameters(): ', err);
that.setState({
isLoading: true,
data: [],
categories: []
})
});
},
componentDidMount: function() {
this.updateState();
},
render: function() {
return (
<Panel className="panel-info" header={<h4 className="panel-title">Service Config</h4>}>
<div>
<table className="table table-striped table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th className="col-lg-2 text-center">AMP Name</th>
<th className="col-lg-2 text-center">Athena Name</th>
<th className="col-lg-2 text-center">Description</th>
<th className="col-lg-1 text-center">Default</th>
<th className="col-lg-1 text-center">Min Value</th>
<th className="col-lg-1 text-center">Max Value</th>
<th className="col-lg-1 text-center">Action</th>
</tr>
</thead>
<tbody>
{this.state.categories.map((category, index) =>
<th colSpan="7" key={index} style={{'textAlign':'left', 'paddingLeft':'5px', 'backgroundColor': '#D3D0CF'}}>{this.state.category}</th>
this.state.data.map((row, i) =>
if (row.category === category) {
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
}
)
)}
</tbody>
</table>
</div>
</Panel>
);
}
});
最佳答案
我会将“th”更改为“tr”,因为我很确定如果你在“tbody”中添加“th”,React 会给你一个警告
let finalList = []
this.state.categories.forEach( (cat, index) => {
finalList.push(<tr...>{this.state.category}</tr>)
this.state.data.forEach( (row, index) => {
if(row.category === cat){
finalList.push(
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
)
}
})
})
警告的话我会避免使用表结帐 css 网格,它们更加灵活且得到很好的支持
关于javascript - 警告 : validateDOMNesting(. ..): <div> 不能作为 <tbody> 的子项出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45339086/
我正在尝试将 margin-left:20px 分配给表单内的所有 div,其类包含编辑,具有以下内容: form.edit > div { margin-left:20px; } 我的想法
我有这个 xpath: .//*[@id='some_id']/td//div 现在我想选择特定类型的 div 的任何子项,例如每个子项是标签或跨度。像这样的东西 .//*[@id='some_id'
我有一个包含包含用户信息的键列表的键,现在当我的表单加载时,我想将这些键作为数组获取。我该怎么做?我找到了获取计数的方法,但仍然不知道如何获取这些 key 。 最佳答案 您可以使用 Microsoft
关闭。这个问题需要更多 focused 。它目前不接受答案。 想要改进这个问题?更新问题,使其只关注 editing this post 的一个问题。 关闭 6 年前。 Improve this q
我正在通过一些在线教程来学习 AEM。根据教程,创建组件时,需要在 Allowed Parents 或 Allowed Children 中输入一些值。但是,我在窗口中看不到这样的选项。当我尝试创建组
我需要将 MDI 子窗体的创建集中到 Delphi (VCL) 中的一个独特过程中。这个想法是每次创建 MDI 子窗体时执行一些操作,无论其类型如何,即将其标题名称添加到列表中以访问该 MDI 子窗体
我试图在 TreeView 中获取所选节点的所有子节点,但遇到了一些问题。 以这个 TreeView 为例: 我想将所有子节点变为黄色突出显示的“文件夹”节点,这将是旁边有一条蓝线的子节点。 这是我尝
我在最小化我所有的 MDIChildren 时遇到了麻烦,遇到了 MDIChild to minimize not activated properly 我最小化所有 child 的代码是: proc
我使用下面的代码通过单击系统关闭按钮来关闭 MDI 子窗体,它工作正常: procedure Tfrm_main.FormClose(Sender: TObject; var Action: TC
仅当我指定对象的完整路径时,我才能通过指定特定子键来查找 Firebase 对象。这是为什么? 这有效 ref.child(`users/${user.uid}/watchlist/${key}`)
每当我单击工具栏菜单时,它每次都会显示新表单。我想阻止它一次又一次地显示相同的表单。在给出的代码中,form2 一次又一次地显示。我想停止它,以便它显示一次。 喜欢: private void new
我想知道是否有一种方法可以通过遍历父节点的 vector 来获取子节点中的数据。我有一个我计划经常更改的 XML 文件,因此我想避免对属性名称进行硬编码。因此,我想在我的子节点中提取数据而不使用 pt
假设我有以下 YAML 文件: - key1: value # and so on... key99: value key100: subkey1: value # an
我不是代码天才,而是行动脚本爱好者。 你能帮我吗? 我有一个函数,根据选择的对象,该函数将事件监听器调用已经在舞台上的一组“子项目”(我想在单击时重新使用具有更改参数的子项目,而不是创建多个实例和代码
我需要一些帮助来查询分层数据。这是一个简单的表,其中 parent_id 引用 id 并且对于根条目可能为 null。 create table edition ( id
我尝试获得一个简单的 GEF 编辑器。我有一个 GraphicalEditorWithPalette 来创建我的示例模型。我有一个覆盖 createFigure 和 getModelChildren
我正在尝试搜索其中包含子项(文本区域)的表格单元格。我努力了td.children.value,td.childNodes.value,td.firstChild.value,td.lastChild
我有一个 mdi 父 form 并且我在运行时通过以下代码将我的其他 form 作为 mdi 子窗体打开: private void MenuItem_Click(object sender, Eve
我在 Activity 中加载了一个 GridView,其中存在 fragment 。 GridView 本身并不位于 Fragment 中。我通过 BaseAdapter 创建了一个客户适配器,一切
我在导航 Controller 中有两个 child (根 child 和第二个 child )。我通常先去找根 child ,然后再去找第二个 child 。这允许我使用导航 Controller
我是一名优秀的程序员,十分优秀!