獲取 React.Fragment 的孩子

Question

我在我的組件中返回React.Fragment ：

render() {
  return (
    <Fragment>
      <MyFirstElement/>
      <MySecondElement/>
    </Fragment>

現在我想處理父組件中的所有子組件。 我可以通過this.props.children獲取 Fragment 組件本身。

我的問題

但是我怎樣才能得到Fragment組件的孩子，以便我也可以處理Fragment的孩子？

Answer 1

如果要“編輯”傳遞給組件的子組件，最好的選擇是創建一個自定義組件，您可以在其中完全控制子組件。

由於組件僅返回其子組件，因此它的行為類似於Fragment

小例子來證明這一點”

1. <Parent />返回一個帶有 2 個<Child />組件的<CustomFragment>
2. <Child />組件需要一個testProp值，但<Parent />沒有提供它
3. 在我們的<CustomFragment>中，我們通過我們的孩子map() ，添加<Child />期望的testProp

 class Parent extends React.Component { render() { return ( <CustomFragment> <Child /> <Child /> </CustomFragment> ); } } class Child extends React.Component { render() { return <p>{`Deep #${this.props.testProp}`}</p> } } class CustomFragment extends React.Component { render() { // Render children return this.props.children.map((child) => { // Change child if needed // For example, lets add a testProp child.props['testProp'] = Math.floor(Math.random() * 10) + 1 // Return return child; }); } } ReactDOM.render(<Parent />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>