[英]Child component has id updated in react when I don't want it to
I'm fairly new to react and I'm trying to create nested tables.我对反应还很陌生,我正在尝试创建嵌套表。 When I only expand one of the rows to get the nested table it works fine but when I expand more than 1 then it breaks other parts of the program that rely on the unique id for the child tables.
当我只扩展其中一行以获得嵌套表时,它工作正常,但是当我扩展超过 1 时,它会破坏程序的其他部分,这些部分依赖于子表的唯一 ID。 I'd like for it to look like it is below:
我希望它看起来像下面这样:
However what happens is that when I expand more than 1 table, let's say 2 as in the example above then the id of the first table will be renamed to childTable1 also but I want it to stay as childTable0.然而,当我扩展超过 1 个表时,假设为 2,如上例所示,那么第一个表的 id 也将重命名为 childTable1,但我希望它保持为 childTable0。 In the code below the "Parent" component is actually a child of another table component but that only has 1 entry at the moment so I'm not seeing any issues in there for now but whatever solution I get I'll just use it across all of the nested tables.
在下面的代码中,“父”组件实际上是另一个表组件的子组件,但目前只有一个条目,所以我现在没有看到任何问题,但无论我得到什么解决方案,我都会使用它所有嵌套表。
const {datas}=this.state;
return (
<React.Fragment>
<Table className='table table-bordered border-dark hover' id={'ParentTable'}>
<thead>
<tr>
<th scope='col'>ID</th>
<th scope='col'>Name</th>
<th scope='col'>Expand</th>
</tr>
</thead>
<tbody>
{datas.map((data, index) =>
{if (this.props.buttonText[index] === '^')
{
//table is expanded so return row and child table
//tablePath is the index to get there so in the above image
//if index = 0 then the path would be [0]
//if index = 1 then the path would be [1]
//remember this is a child component of another table so it'll most
//likely be [0,0] or [0,1] etc...
let tablePath = this.props.tableId;
if(tablePath.length < 2)
{
tablePath.push(index);
}
else
{
tablePath[1] = index;
if (tablePath.length > 2)
{
//incase if user has expanded child tables also then we want
//to omit it.
tablePath = tablePath.subarray(0,2);
}
}
return(<React.Fragment>
<tr className=...}
onMouseDown={() => ...}
key={data.ID}
id={"ParentRow"+data.ID}>
<td >{data.ID}</td>
<td >{data.Name}</td>
<td >
<button
className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
onClick = {() => this.props.ExpandOrCollapse(...)}
>{this.props.buttonText[index]}</button>
</td>
</tr>
<tr>
<td colSpan='3'>
<Child
ParentID = {data.ID}
ExpandOrCollapse={this.props.ExpandOrCollapse}
index={this.props.index}
buttonText={this.props.buttonText}
tableId = {tablePath}
path = {this.props.path}/>
</td>
</tr>
</React.Fragment>);
}
else
{
//table is collapsed so just return row
return(<React.Fragment>
<tr className=...}
onMouseDown={() => ...}
key={data.ID}
id={"ParentRow"+data.ID}>
<td >{data.ID}</td>
<td >{data.Name}</td>
<td >
<button
className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
onClick = {() => this.props.ExpandOrCollapse(...)}
>{this.props.buttonText[index]}</button>
</td>
</tr>
</React.Fragment>);
}
}
)}
</tbody>
</Table>
</React.Fragment>
);
}
and the child component looks like:子组件看起来像:
{
const {datas} = this.state;
return(
<React.Fragment>
<Table className='table table-bordered border-dark hover' id={'ChildTable'+this.props.tableId[1]}>
<thead>...
Turns out the issue was with let tablePath = this.props.tableId;
原来问题出在
let tablePath = this.props.tableId;
since this.props.tableID
is an array it should have been let tablePath = [...this.props.tableId];
因为
this.props.tableID
是一个数组,所以应该let tablePath = [...this.props.tableId];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.