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'));

但是我得到的输出并不是我想要的。它不会渲染 this.html数组元素。 基本上我试图动态添加html组件 我该如何处理？

Answer 1

我看到的问题是html是App的实例属性

this.html

当您动态更新此变量的内容时，React不会触发HTML更新其内容。如果不太了解代码尝试执行的操作，请将html作为state属性的键。< / p>

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

每当您想要更新html的内容时，请使用更新的内容调用this.setState，这将触发React尝试呈现任何更新的内容。

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

在处理React时理解状态和道具是必要的，所以我建议学习核心概念，这样你就能更好地处理HTML没有用更新内容重新渲染的问题。

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

React js html追加

1 个答案: