4

特定の の子を見つけるために、この小さな関数を作成しましたtype。

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
}
4

2 に答える 2

1

まさにそれを行うreact-queryと呼ばれる小さなオープンソース ライブラリがあります。

編集: react-query リポジトリは所有者によってアーカイブされています。現在は読み取り専用です。

于 2015-11-12T09:39:09.580 に答える
0

これは、要素タイプのみをサポートする、私が望むものの単純なバージョンです。

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)
于 2015-09-21T22:37:48.297 に答える