通過名稱獲取React組件

有沒有方法按名稱訪問React組件？例如，使用React devtools，我可以搜索組件並使用$r訪問控制檯中最近選擇的組件。有沒有一種方法可以在沒有React devtools的情況下訪問這些組件？即有沒有我可以用來抓取這些組件的查詢？通過名稱獲取React組件

更多信息：我有興趣爲使用反應的特定網頁編寫Chrome擴展。我知道要與之交互的組件的名稱，但我不確定如何實際訪問它。

來源

2015-09-05 acidic

爲什麼這是你的用例？ – Pcriulan

對不起，我應該更清楚。我添加了一些額外的信息。 – acidic

在這種情況下，很難確切知道你指的是什麼組件的名稱 - 你沒有澄清，也沒有示例代碼。 –

這裏有一個函數來遍歷並轉換爲樹結構的一個反應組件層次結構。剛剛接觸組件的名稱與c.constructor.name：

const { 
    isDOMComponent, 
    getRenderedChildOfCompositeComponent, 
    findRenderedComponentWithType 
} = React.addons.TestUtils; 

function traverse(c, node) { 
    if (isDOMComponent(c)) { 
    return; 
    } 

    node.children.push({ 
    name: c.constructor.name, 
    children: [] 
    }); 

    const ccc = getRenderedChildOfCompositeComponent(c); 

    if (isDOMComponent(ccc)) { 
    React.Children.forEach(ccc.props.children, function traverseCompositeChildrenOf(child) { 
     if (child.type) { 
     const cccc = findRenderedComponentWithType(ccc, child.type); 
     traverse(cccc, getNode(node, c.constructor.name)); 
     } 
    }); 
    } else { 
    traverse(ccc, getNode(node, c.constructor.name)); 
    } 
}

使用方法如下：

const root = React.render(<Root/>, document.createElement('div')); 

let tree = { 
    name, 
    children: [] 
}; 

let tree = traverse(root, tree); // your component hierarchy by name in a tree

taken from this repo

來源

2015-09-05 07:16:03 romseguy

如果你不想豎構圖，你可以使用一個ref。
否則它們是在子孫訪問祖先組件的情況下作爲道具傳遞的引用，或者在祖先訪問子孫組件的情況下保持在範圍中。

https://facebook.github.io/react/docs/more-about-refs.html 參考原則上允許更多的水平組合，但如果你正在做很多這個，你可能想要考慮你的數據模型，以及像Flux /單向數據流的實現。這實際上是來自文檔的指針;他們建議您仔細考慮數據結構&狀態。（見https://facebook.github.io/react/docs/more-about-refs.html#cautions）

在你的情況，我會建議有一個函數作爲道具傳遞給所有組件，他們可以觸發狀態改變來設置最近查看的組件。你只需要傳遞一個唯一的ID作爲道具。假設您可以控制要選擇的組件的編程響應，則應該將所有組件都傳遞給駐留在共同祖先組件中的公共處理函數。它將作爲唯一標識該組件的索引作爲參數。該函數會更新狀態，React將發出新的渲染週期。

來源

2015-09-05 10:55:09

我已將更多信息添加到我的問題中。 – acidic

通過名稱獲取React組件

回答

相關問題