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

Question

我创建了这个小函数来查找特定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
}

Answer 1

有一个叫做react-query的小开源库就是这样做的。

edit:反应-查询存储库已被所有者存档。它现在是只读的。

Answer 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)