React.Children 不显示孩子答案

【问题标题】：React.Children does not display childrenReact.Children 不显示孩子
【发布时间】：2021-12-31 09:36:39
【问题描述】：

我想使用react-native-maps-clustering，但这个只需要标记，这些标记是地图的直接子代。

喜欢这个例子

<MapView>
  <Marker/>
  <Marker/>
</MapView>

在我的例子中，我的标记位于嵌套在其他元素中的另一个文件中

<MapView>
  <MarkersLayer/>
</MapView>

MarkersLayer.tsx

<Fragment>
  <Trajectory/>
 <Fragment>
  <Marker>
     <MarkerStyle/>
  <Marker/>
 </Fragment>
</Fragment>

测试：在库中 - ClusteredMapView.js - l.84

      propsChildren.forEach((child, index) => {
        //my test
        if (child.type?.name == "MarkersLayer"){
          console.log('I am MarkersLayer')
          React.Children.forEach(child, ch => {
            console.log("child MarkersLayer", ch)
          })
        }else if (child.props.coordinate){
          console.log("I am a marker", child)
        }
         //end
        if (isMarker(child)) {
          rawData.push(markerToGeoJSONFeature(child, index));
        } else {
          otherChildren.push(child);
        }
      });

MapView 中的孩子：

MarkerLayer 中的子级：

测试：在我的 MarkerLayer 组件中

  const propsChildren = useMemo(
    () => React.Children.toArray(children),
    [children],
  );

结果：

该库使用 React.Children 来查找 MapView 中包含的子项，但我无法在 MarkerLayer 中获取标记。

感谢阅读这篇文章和回答的人:)

【问题讨论】：

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

尝试使用useState() 和useEffect()。

这样做是这样的：

const [children, setChildren] = useState([]);

useEffect(() => {
    setChildren(React.Children.toArray(children))
}, []);

【讨论】：