类似jQuery的查找/选择React元素数组的方法

我创建了这个小函数来查找特定

类型的子项

我希望能够通过jQuery之类的属性选择子项，
[name=“example”]
。有没有办法从jQuery中剥离字符串选择器功能，以创建一个对象映射，并将其馈送到类似lodash的
\查找

我意识到这是一个用于选择/查找/筛选数组的假解决方案，但我认为它确实有用。我也知道它不会找到深层次的孩子，它只会处理直接的根孩子

这是否已经存在于react中

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
}

下面是我想要的一个简单版本，它只支持元素类型

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

理想情况下，我可以这样做，它将获得所有
div
，并将
name
prop
设置为
hello

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

下面是完整的示例

var selectElements=函数（selectorString，reactElements）{
变量选择器=选择器字符串.split（'，'）
选择器=\映射（选择器，函数（项）{
返回项目。替换（/^\s+\s$/，“”）
})
返回过滤器（reactElements，函数（reactElement）{
return u0.contains（选择器、reactElement.type）
})
}
var OnlyElements=React.createClass({
displayName:“OnlyElements”，
getInitialState:函数（）{
返回{
孩子们：这个。道具。孩子们
}
},
componentWillMount:函数（）{
这是我的国家({
子元素：选择元素（this.props.allow、this.props.children）
})
},
渲染：函数（）{
返回(
{this.state.children}
)
}
})
var Test=React.createClass({
displayName:'测试'，
渲染：函数（）{
返回(
阿尔法
贝塔
伽马射线
)
}
})
React.render（，document.body）
有一个名为的小型开源库正是这样做的

编辑：所有者已存档react查询存储库。它现在是只读的
 如果您使用的是现代浏览器，jQuery中的大部分选择器功能都可以通过使用css选择器引擎的
document.querySelectorAll
本机使用。您也可以使用，这是jQuery选择器引擎的基础。但是我想提供HTML/元素，如
this.props.children
@KevinB+1中提到的Sizzle。ThomasReggi请查看Sizzle，它很可能是您问题的答案。只是尝试了这个
Sizzle.matches（'tr'，this.props.children）
不起作用。返回空数组。可能是因为它不是真正的DOM元素数组吗？为什么在使用React时需要这样的函数？在询问React问题时使用“jquery”标记可能没有什么帮助，因为jquery的命令式DOM操作与React的声明式方法没有很好地结合。一个带有“reactjs”标签的“how to do x？”问题可能会给出一个启发性的答案。似乎react查询已被放弃，另一个库应该可以做到这一点：@Zaninoto teaspoon已被所有者存档。它现在是只读的。你能和我们分享一下你目前使用的是什么吗？
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)