Question

我目前正在以下列方式映射我的父组件子项的值：

const subRows = React.Children.map(this.props.children, (child, i) => {
  return child;
});

我想要的是定位这些孩子的类型值，以便我可以在回报中过滤掉特定的孩子。任何人都知道是否有一种简单的方法来实现这一目标？

Answer 1

您可以通过props访问儿童的属性。

如果要过滤子项，可以使用React.Children.toArray获取普通的JS数组，然后使用它的Array.prototype.filter方法。

const subRows = React.Children.toArray(this.props.children).filter((child, i) => {
  return child.props.someProp;
});

请记住：

在展平子项列表时，
React.Children.toArray()更改键以保留嵌套数组的语义。也就是说，toArray为返回数组中的每个键添加前缀，以便每个元素的键都限定为包含它的输入数组。

您还可以使用React.Children.forEach并填充外部范围中可用的数组：

const subRows = [];
React.Children.forEach(this.props.children, (child, i) => {
  if (child.props.someProp) {
    subRows.push(child)
  }
});

Answer 2

React.Children.toArray(this.props.children).filter(...)

Answer 3

我已经编写了一个库来扩展React Children实用程序，该库中有用于过滤甚至深度过滤React组件的函数

https://fernandopasik.com/react-children-utilities/filter

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  bool isTextFiledFocus = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text("List"),
        ),
        body: Container(
          margin: EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Focus(
                child: TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: InputDecoration(labelText: "Input 1"),
                ),
                onFocusChange: (hasFocus) {
                  setState(() {
                    isTextFiledFocus = hasFocus;
                  });
                },
              ),

              TextFormField(
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(labelText: "Input 1"),
              ),
              RaisedButton(
                color: isTextFiledFocus ? Colors.pink : Colors.blue,
                child: Text("Ok"),
                onPressed: () {
                  print("I am clicked");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

过滤掉React组件的子项

3 个答案: