Question

我的反应菜单组件呈现链接列表。其他部分需要设置动画（宽度和x / y pos），具体取决于Menu组件链接宽度的宽度，因此所有这些都需要在渲染完成后发生，我需要从DOM中读取值。

我正在寻找一种正确的方法，没有反应反模式来处理这种情况，但无法以我满意的方式对其进行排序。

这是一个解释性流程。

1）用户点击菜单中的链接。

2）激活该链接。

this.setState({link: {active: true}});

3）查找并存储所点击元素的宽度。

let w = this.myLink.offsetWidth; // myLink from refs.

4）以新宽度更新状态

this.setState({styleState: { width: w }}); // Styles used in component elsewhere.

OK！这很好用，现在我想对pos X / Y做同样的事情，这会让事情变得更复杂。现在我需要getBoundingClientRect()并考虑这个元素的父母以获得正确的位置等。

我一直希望有一个合理的DOM API，我可以从DOM中获取值（是的，jQuery样式 - 比如jqLite），然后使用值来更新我的状态，从而重新渲染组件。我意识到以这种方式操纵 DOM是没有意义的，所以我没有尝试，但在这种特定情况下，真实实际上已经在DOM中了我需要提取它。

是否有一个lib ppl用于这些事情，为了方便起见，只是为了获得一些getter方法，如el.width()，el.left()？

Answer 1

我不认为渲染后读取 dom的大小/样式的样式不好。请务必不要直接修改dom 。原因是真正的dom应该始终与虚拟dom同步。

我会将此行为封装在接收onClick的自定义链接组件中：

//untested pseudocode
class Link extends Component {

  handleRendered = (el) => {
    this.width = el.clientWidth;
    ....
  }

  handleClick = (ev) => {
    this.props.onClick({
      width: this.width,
      x: this.x,
      ...
    })
  }

  render = () => {
    return (
      <div ref={(el) => this.handleRendered(el)} onClick={this.handleClick}>
        {this.props.children}
      </div>
    );

  }
}


class MyPage extends Component {

  handleClick = ({width, ....}) => {
    this.setState({
      otherElementStyle: {
        width: width
      }
    })
  }

  render = () => {
    return (
      <Link onClick={this.handleClick}>
        Menu1
      </Link>
    );

  }
}

关于你要求的图书馆，我不知道，但我打赌有一个。

React检索（某些）DOM值的方法

1 个答案: