React js html append

Question

我想用树形数据构建一棵树。 我自己编写的代码如下

import React from 'react'; 
import { render } from 'react-dom'; 
import Hello from './Hello'; 
import { Draggable, Droppable } from 'react-drag-and-drop'; 
import './index.css'; 
const styles = { 
    fontFamily: 'sans-serif', 
    textAlign: 'center', 
}; 

class App extends React.Component 
{ 
constructor() 
    { 
    super(); 
    this.html=[]; 
    this.myTreedata=[{ 
    name : "Phrase", 
    id : 1, 
    children : [{ 
     name : "poem", 
     id : 2 
    }] 
    }]; 
    this.state={ 
     toggle : true 
    } 

    this.onDrop=this.onDrop.bind(this); 
    this.assign=this.assign.bind(this); 
    } 
    assign(data) 
    { 

    data.map(node => { 
     this.html.push(<Droppable types={['yolo']} onDrop= 
    {this.onDrop}><li id={node.id}><span>{node.name}</span> 
     </li></Droppable>); 
     if(node.children && node.children.length > 0) 
     { 

      this.html.push(<ul>);  
      this.assign(node.children); 
      this.html.push(</ul>); 
     } 
     console.log(this.html); 
    }) 
    //console.log(this.html); 
    //return html; 
    } 


    onDrop(data,e) 
    { 
    this.setState({ 
     toggle : !this.toggle 
    }); 
    this.myTreedata=[{ 
    name : "op", 
    id : 1, 
    children : [{ 
     name : "poem", 
     id : 2, 
     children : [{ 
     name : "poem2", 
     id : 3 
     }] 
    }] 
    }]; 
    } 
render() 
    { 
    var str=this.myTreedata; 

    this.assign(str); 
    return ( 
    <div> 
    <Tree /> 
    <div className="tree" > 
     <ul > 
     {this.html} 
     </ul> 
     </div> 
    </div>); 

} 
} 

class Drag extends React.Component 
{ 
    constructor() 
    { 
    super(); 

    } 
    render() 
    { 
    const myTreedata=[{ 
    name : "phrase", 
    id : 1, 
    children : [{ 
     name : "poem", 
     id : 2 
    }] 
    }]; 
    return(<div><App /></div>); 
    } 
} 

const Tree =() => 
(<div> 
    <Draggable type="yolo" data="banana"> 
     <p>Banana</p> 
    </Draggable> 
    </div>); 

render(<Drag />, document.getElementById('root')); 

但是我得到的输出是不是我wanted.Its不使所述 this.html数组元素。 基本上我试图动态追加HTML组件 我该如何处理？

Answer 1

我看到作为HTML的问题是应用程序

this.html 

当你动态地更新这个变量的内容的一个实例属性，阵营是不会触发HTML过于更新其content.Without理解你的代码试图做的很多事情，都要把html作为状态属性的关键。

constructor(){ 
    super() 
    this.state = { 
    html = [] 
    } 
    //other initializations 
} 

每当你想更新HTML内容，调用this.setState与更新的内容，这将触发反应，试图提供任何更新的内容。与打交道时

this.setState({ 
     html: //updated html 
    }) 

了解状态和道具是必须作出反应，所以我会建议学习的核心概念，所以你能够更好地处理您的HTML不被重新渲染与更新的内容的问题。

https://facebook.github.io/react-native/docs/state.html