類似jQuery的方法來查找/選擇React元素數組

我創建了這個小函數來查找特定type的子項。類似jQuery的方法來查找/選擇React元素數組

我想能夠通過jQuery，[name="example"]等屬性選擇孩子。有沒有什麼辦法從jQuery中去掉字符串選擇器的功能來創建一個對象映射來餵給lodash的_.find？

我知道這是一個用於選擇/查找/過濾數組的虛擬解決方案，但我認爲它可能非常有用。我也知道，它不會找到深刻的孩子，它只會處理直接根源的孩子。

這是否存在於反應中？

function containsElement (element, children) { 
    var result = [] 
    element = _.flatten([element]) 
    if (React.isValidElement(children) && !_.isArray(children)) { 
    var contains = _.contains(element, children.type) 
    if (contains) return children 
    return false 
    } else if (!React.isValidElement(children) && !_.isArray(children)) { 
    return false 
    } 
    children.forEach(function (child) { 
    var isElm = React.isValidElement(child) 
    var contains = _.contains(element, child.type) 
    if (isElm && contains) { 
     result.push(child) 
    } 
    }) 
    if (!result.length) return false 
    return result 
}

來源

2015-09-21 ThomasReggi

如果您使用的是現代瀏覽器，jQuery中的大部分選擇器功能可以通過使用'document.querySelectorAll'的本地方式提供，該文件使用css選擇器引擎。你也可以使用[sizzle]（http://sizzlejs.com/），這是jQuery的選擇器引擎的基礎。 –

但我想提供'this.props.children'中的HTML /元素。 – ThomasReggi

@KevinB +1提到Sizzle。 ThomasReggi會檢查出Sizzle，這可能是你的問題的答案。 – Wolf

下面是我想要的僅支持元素類型的簡單版本。

selectElements('div, span', this.props.children)

理想我能做到這一點，它會得到所有divs與nameprop設置爲hello。

selectElements('div[name="hello"]', this.props.children)

下面是完整的示例，(jsbin)。

var selectElements = function (selectorString, reactElements) { 
    var selectors = selectorString.split(',') 
    selectors = _.map(selectors, function (item) { 
    return item.replace(/^\s+|\s$/, '') 
    }) 
    return _.filter(reactElements, function (reactElement) { 
    return _.contains(selectors, reactElement.type) 
    }) 
} 

var OnlyElements = React.createClass({ 
    displayName: 'OnlyElements', 
    getInitialState: function() { 
    return { 
     children: this.props.children 
    } 
    }, 
    componentWillMount: function() { 
    this.setState({ 
     children: selectElements(this.props.allow, this.props.children) 
    }) 
    }, 
    render: function() { 
    return (
     <div> 
     {this.state.children} 
     </div> 
    ) 
    } 
}) 

var Test = React.createClass({ 
    displayName: 'Test', 
    render: function() { 
    return (
     <OnlyElements allow='div'> 
     <span>Alpha</span> 
     <div>Beta</div> 
     <span>Gamma</span> 
     </OnlyElements> 
    ) 
    } 
}) 

React.render(<Test/>, document.body)

來源

2015-09-21 22:37:48 ThomasReggi

有一個叫做react-query的小開源庫，完全可以做到這一點。

來源

2015-11-12 09:39:09

似乎反應查詢被放棄，這個其他庫應該做的伎倆：[茶匙]（https://github.com/jquense/teaspoon） –

類似jQuery的方法來查找/選擇React元素數組

回答

相關問題