Я создаю вложенный список, используя код ниже
class Li extends React.Component{
render() {
if(this.props.boo == true)
{
return <li key={this.props.name} className="layer" id={this.props.name}><input type="checkbox" defaultChecked="true" onChange={refreshMap}/>{this.props.name}</li>
}
return <li key={this.props.name} className="layer" id={this.props.name}><input type="checkbox" defaultChecked="" onChange={refreshMap}/>{this.props.name}</li>
}
}
class Ul extends React.Component{
constructor(props) {
super(props);
this.state = {display:"none"}
}
render() {
return <li className="layer" id={this.props.k} onClick={()=>change_display(this)}><input type="checkbox" defaultChecked="" onChange={refreshMap}/>{this.props.k}<ul name={this.props.k} style={{display:"none"}}>{this.props.key_temp}</ul></li>
}
}
function change_display(name){
console.log(name)
name = name.props.k
if(document.getElementsByName(name)[0].style.display=="none"){
document.getElementsByName(name)[0].style.display = "block"
}
else {
document.getElementsByName(name)[0].style.display = "none"
}
}
function Domlist(list,layers) {
var i=0
var list_dom = new Array()
let key_temp
for(var k in list){
if(typeof(list[k])=="string"){
if(layers.indexOf(k)!=-1) {
list_dom[i] = <Li boo={true} name={k} key={k}/>
}
else{
list_dom[i] = <Li boo={false} name={k} key={k}/>
}
}
else{
key_temp = Domlist(list[k],layers)
list_dom[i] = <Ul k={k} key_temp={key_temp} key={k}/>
}
i = i+1
}
return list_dom
}
Затем я запускаю этот скрипт на своей веб-странице, и когда я нажимаю на список в более низкой степени, его родительский комментарий будет передан в функцию, но я хочу использовать только само соревнование.
Как это сделать, и мне интересно, почему это происходит.
Буду признателен, если есть какой-нибудь ответ