In this Scenario, I create a Dynamic table with reactjs.
In this, there is an input text and increment and decrement feature for resizing the table row column and create a
checkbox to make table editable.
Please help me to resolve this issue
"Uncaught Error: ReactDOM.render(): Invalid component element.
This may be caused by unintentionally loading two independent copies of React".
<!DOCTYPE html>
<html>
<head>
<title>My First React File</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let cols = 0;
let text = "";
let all_row = 1;
let all_col = 1;
let dTable= "";
let i = 0;
let index_count = 0;
let table_value = 1;
class DynamicTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Dynamic Table'
}
this.tableHead = this.tableHead.bind(this);
};
tableHead(top_event) {
this.setState({data: top_event.target.value});
}
tableRows(rows_event) {
text = "";
let create_rows = 0;
all_row = rows_event.target.value;
dTable= document.getElementById('dynamic_tbody');
while(create_rows < all_row) {
text+='<tr>';
for(i = 0; i < all_col; i++){
text+='<td>Col-1</td>';
}
text+='</tr>';
create_rows = create_rows + 1;
}
ReactDOM.findDOMNode(dTable).innerHTML = text;
document.getElementById('dynamic_style_table').style.borderWidth = table_value;
let tbody = document.getElementById("dynamic_tbody");
let tr_tag = tbody.getElementsByTagName("tr");
while(index_count < tr_tag.length) {
let td_tag = tr_tag[index_count].getElementsByTagName("td");
for(let td_index = 0; td_index < td_tag.length; td_index++) {
td_tag[td_index].style.border = table_value+"px solid #800000";
}
index_count = index_count + 1;
}
index_count = 0;
}
tableColumns(cols_event) {
text = "";
let create_rows = 0;
all_col = cols_event.target.value;
dTable = document.getElementById('dynamic_tbody');
while(create_rows < all_row) {
text+='<tr>';
for(i = 0; i < all_col; i++){
text+='<td>Col-1</td>';
}
text+='</tr>';
create_rows = create_rows + 1;
}
ReactDOM.findDOMNode(dTable).innerHTML = text;
document.getElementById('dynamic_style_table').style.borderWidth = table_value;
let tbody = document.getElementById("dynamic_tbody");
let tr_tag = tbody.getElementsByTagName("tr");
while(index_count < tr_tag.length) {
let td_tag = tr_tag[index_count].getElementsByTagName("td");
for(let td_index = 0; td_index < td_tag.length; td_index++) {
td_tag[td_index].style.border = table_value+"px solid #800000";
}
index_count = index_count + 1; // Move to next row
}
index_count = 0;
}
tableBold(bold_value) {
let table_value = bold_value.target.value;
document.getElementById('dynamic_style_table').style.borderWidth = table_value;
let tbody = document.getElementById("dynamic_tbody");
let tr_tag = tbody.getElementsByTagName("tr");
while(index_count < tr_tag.length) {
let td_tag = tr_tag[index_count].getElementsByTagName("td");
for(let td_index = 0; td_index < td_tag.length; td_index++) {
td_tag[td_index].style.border = table_value+"px solid #800000";
}
index_count = index_count + 1;
}
index_count = 0;
}
tableColumnEdit(edit_event) {
let edit_value = document.getElementById("edit_cell_checkbox").checked;
let tbody = document.getElementById("dynamic_tbody");
let tr_tag = tbody.getElementsByTagName("tr");
if(edit_value == true) {
for(let td_index = 0; td_index < tr_tag.length; td_index++) {
tr_tag[td_index].contentEditable = "true";
}
} else {
for(let td_index = 0; td_index < tr_tag.length; td_index++) {
tr_tag[td_index].contentEditable = "false";
}
}
}
render() {
let areaLeft = {
float: 'left',
color: '#800000',
height: '320px',
width: '45%',
border: '5px solid #333',
padding: '20px 20px',
lineHeight: '4'
};
let areaRight = {
float: 'right',
color: '#333',
height: '100%',
width: '45%',
border: '3px solid #333',
padding: '20px 20px'
};
let fontSize = {
fontSize: 17,
fontWeight: 'bold',
color: '#333'
};
let rows_Border = {
border : "1px solid #333",
margin: '2px 0 0 2px'
};
let textBox = {
margin: '2px 0 0 0'
};
return (
<div>
<form action="#" method="post">
<div style={areaLeft}>
<div class="form-group" style={textBox}>
<label htmlFor="first_text" style={fontSize}>Tableable name:- </label>
<input class="form-control" type="text" name="first_text" id="first_text" value = {this.state.data} onChange = {this.tableHead}/>
</div>
<div class="form-group">
<label htmlFor="all_row_range" style={fontSize}>Range for row inc/ dec:- </label>
<input class="form-control" type="range" name="all_row_range" id="all_row_range" min="1" max="5" onChange = {this.tableRows}/>
</div>
<div class="form-group">
<label htmlFor="all_col_range" style={fontSize}>Range for column inc/ dec:- </label>
<input class="form-control" type="range" name="all_col_range" id="all_col_range" min="1" max="5" onChange = {this.tableColumns}/>
</div>
<div class="form-group">
<label htmlFor="bold_select_box" style={fontSize}>For Boldness of cell border:- </label>
<select class="form-control" name="bold_select_box" id="bold_select_box" onChange = {this.tableBold}>
<option value="0">---Please select a value---</option>
<option value="1">Level-1</option>
<option value="2">Level-2</option>
<option value="3">Level-3</option>
<option value="4">Level-4</option>
<option value="5">Level-5</option>
</select>
</div>
<div>
<label htmlFor="edit_cell_checkbox" style={fontSize}>For Editing on cell of the table:- </label>
<input type="checkbox" name="edit_cell_checkbox" id="edit_cell_checkbox" value="editing" onClick = {this.tableColumnEdit}/>
</div>
</div>
<div style={areaRight}>
<table style={rows_Border} id="dynamic_style_table">
<caption><h3>{this.state.data}</h3></caption>
<tbody id="dynamic_tbody">
<tr id="default_row">
<td style={rows_Border}>col-1</td>
<td style={rows_Border}>col-2</td>
<td style={rows_Border}>col-3</td>
<td style={rows_Border}>col-4</td>
<td style={rows_Border}>col-5</td>
</tr>
<tr id="default_row">
<td style={rows_Border}>col-6</td>
<td style={rows_Border}>col-7</td>
<td style={rows_Border}>col-8</td>
<td style={rows_Border}>col-9</td>
<td style={rows_Border}>col-10</td>
</tr>
<tr id="default_row">
<td style={rows_Border}>col-11</td>
<td style={rows_Border}>col-12</td>
<td style={rows_Border}>col-13</td>
<td style={rows_Border}>col-14</td>
<td style={rows_Border}>col-15</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
);
}
}
ReactDOM.render(<DynamicTable />, document.getElementById('app'));
</script>
</body>
</html>
答案 0 :(得分：0)
将ReactDOM.render(<DynamicTable />, document.getElementById('app'));置于<div id="app" />之前React无法找到div。
因此，在<script> ... </script>之后移动<div>可以解决您的问题。