Question

我将在我的组件中返回 React.Fragment：

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

现在我想处理父组件中的所有子组件。我可以通过 this.props.children 获取 Fragment 组件本身。

我的问题

但是我怎样才能获得 Fragment 组件的子级，以便我也可以处理 Fragment 的子级？

Answer 1

如果您想“编辑”传递给组件的子组件，最好的选择是创建一个自定义组件，您可以在其中完全控制子组件。

由于组件只返回其子组件，因此它的行为类似于 Fragment

演示这一点的小例子"

<Parent /> 返回带有 2 个 <CustomFragment> 组件的 <Child />
<Child /> 组件需要一个 testProp 值，但 <Parent /> 没有提供它
在我们的 <CustomFragment> 中，我们 map() 通过我们的孩子，添加 testProp 所期望的 <Child />

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>

获取 React.Fragment 的孩子

1 个答案: