React檢索（一些）DOM值的方法

我的反應菜單組件呈現鏈接列表。其他部分需要動畫（寬度和x/y pos），這取決於Menu組件鏈接寬度的寬度，所有這些都需要在所有渲染完成後發生，並且我需要從DOM中讀取值。React檢索（一些）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中，我需要提取它。

爲了方便起見，是否有一個liblp用於這些事情，僅僅爲了獲得幾個像get,el.left()這樣的getter方法？

來源

2017-05-25 miphe

我不認爲它的不良風格閱讀大小/樣式的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> 
    ); 

    } 
}

關於您所要求的圖書館，我不知道有任何，但我敢打賭，有一個。

來源

2017-06-08 10:40:24 msander

這是有道理的，兩個組件感覺更乾淨。儘管獲得元素的左/頂位置的問題仍然存在。奇怪，如果這是一個罕見的情況。 – miphe

職位的問題非常相似。您只需要收集MyPage組件中所有相關組件的位置，並在handleClick函數中使用它們。由於該行爲與多個子組件相關，因此這是實現此目的的正確位置。兒童組件不應該知道使用它們的上下文。 – msander

這就是我不想實現自己的DOM解決方案（'el.left（）'）的原因。用香草javascript，計算一個元素相對於它最接近定位的父元素的posX，這正是我需要的CSS，這不是微不足道的。那裏必須有一個DOM getter lib，它不像jQuery那麼龐大。 – miphe

React檢索（一些）DOM值的方法

回答

相關問題