类似 jQuery 的方式来查找/选择 React 元素数组答案

【问题标题】：jQuery-Like Way to Find / Select Array of React Elements类似 jQuery 的方式来查找/选择 React 元素数组
【发布时间】：2015-12-18 14:18:15
【问题描述】：

我创建了这个小函数来查找特定type 的孩子。

我希望能够通过像 jQuery、[name="example"] 这样的属性来选择子级。有没有办法从 jQuery 中剥离字符串选择器功能以创建对象映射以提供给 lodash 的 _.find 之类的东西？

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

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
}

【问题讨论】：

如果您使用的是现代浏览器，jQuery 中的大部分选择器功能都可以通过使用 css 选择器引擎的document.querySelectorAll 本机获得。您也可以改用 sizzle，这是 jQuery 选择器引擎的基础。
但我想像this.props.children一样提供HTML / 元素。
@KevinB +1 提到了 Sizzle。 ThomasReggi 一定要看看 Sizzle，这很可能是您问题的答案。
刚刚试过这个Sizzle.matches('tr', this.props.children) 没用。返回空数组。会不会是因为它不是真正的 DOM 元素数组？
为什么在使用 React 时需要这样的功能？在询问 React 问题时使用“jquery”标签可能没有帮助，因为 jQuery 的命令式 DOM 操作与 React 的声明性方法不能很好地混合。一个“怎么做x？”仅带有“reactjs”标签的问题可能会产生启发性的答案。

标签： jquery reactjs lodash dom-selection

【解决方案1】：

有一个名为react-query 的小型开源库正是这样做的。

edit：react-query 存储库已被所有者存档。它现在是只读的。

【讨论】：

似乎 react-query 被放弃了，这个其他库应该可以解决问题：teaspoon
@Zaninotto 茶匙已被所有者存档。它现在是只读的。你能和我们分享一下你目前使用什么？

【解决方案2】：

这是我想要的仅支持元素类型的简单版本。

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

理想情况下，我可以做到这一点，它会得到所有 divs 并将 name prop 设置为 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)

【讨论】：