Question

每个祝福示例都有一个静态引用，当元素是动态的时候什么都没有 - 呃！

在我的渲染部分，我有这个：

  <ul>
     { this.state.navItems.map(this.showNavMenu.bind(this)) }
  </ul>

我的showNavMenu会返回一个菜单项及其可能包含的所有子项。

showNavMenu(item) {
  const results = [];
  let subMenu = [];
  if(item.children !== undefined) {
    subMenu = fetchSubMenu(item.children); // it returns back an array
  }

  results.push (
     <li ref={ item.docId }>{ item.title }
       { subMenu }
     </li>
   )
 }

问题：

subMenu需要左派和左派。每个项目的顶部样式位置，分别代表其父母在页面上的位置。

在javaScript中我可以做一个查询选择器......

const parent = document.querySelector('[ref=' + item.docId + ']');

但React不允许我使用querySelector。

问题：

如何拨打电话取回孩子并传递他们父母的x＆amp; Y：

showNavMenu(item) {
  const results = [];
  let subMenu = [];
  if(item.children !== undefined) {
    let children = item.children
    let parent = this.refs[item.docId]   <-- doesn't work, returns undefined
    xPos = ???? parent.???
    yPos = ???? parent.???
    subMenu  = fetchSubMenu(children, xPos, yPos);
  }

  results.push (
     <li ref={ item.docId }>{ item.title }
       { subMenu }
     </li>
   )
 }

Answer 1

在showNavMenu中使用xPos和yPos创建一个状态对象。

	componentDidMount = () => {
	  var xpos = ReactDom.findDOMNode(this).pageX;
      var ypos = ReactDom.findDOMNode(this).pageY;
      this.setState({xPos: xpos, yPos: ypos});
	}

if(item.children !== undefined && this.state.xPos > 0) {
  subMenu  = fetchSubMenu(children, this.state.xPos, this.state.yPos);
}

ReactJs 0.14 - 查找动态元素的dom节点

1 个答案: