React pass props to children

Question

I'm trying to pass extra props to this.props.children, I saw this answer how to pass props to children with React.cloneElement?

and from some reason although I'm not getting any error I can't see the prop

So I have this state

this.state = {
    open: true
}

and I want to pass it down to this.props.children, and this is what I've done so far:

{
    React.Children.map(this.props.children, child =>
        React.cloneElement(child, {sidebarState: this.state.open}))
}

and when I'm console.logging this.props on the children I can't see my new props.

--- EDIT --- In the children it looks like this:

render() {
    console.log(this.props)
    // other code
}

BTW I'm using react 16.0

Answer 1

这是一个例子。

之前（没有将 props 传递给children）：

    <div className="layout">
      {children}
    </div>

之后（将额外的物品props1和props2道具传递给每个孩子）：

    <div className="layout">
      {
        React.Children.map(children, (child) => {
          return React.cloneElement(child, {
            props1: 1,
            props2: 2,
          });
        })
      }
    </div>

props1并props2与每个孩子现有的道具合并。

关于 TypeScript 类型，你必须使用React.ReactElement而不是React.ReactNodeTS 编译器会抱怨React.Children.map（或 ts-ignore 它）：

type Props = {
  children: React.ReactElement;
};

请参阅https://medium.com/better-programming/passing-data-to-props-children-in-react-5399baea0356了解更多说明，这对我了解如何做到这一点有很大帮助！（#mediumPaywall）

Answer 2

将 props 传递给孩子有两种方法：

孩子作为函数

子元素可以是一个函数，而不是一个 React 元素。

调用子函数：

const List = ({ children, sidebarState }) => (
  <ul>
  {
    children(sidebarState)
  }
  </ul>
);

向子级传递一个函数：

<List sidebarState={sidebarState}>
  {
    (sidebarState) => (
      <Item sidebarState={sidebarState} />
    )
  }
</List>

工作示例：

const List = ({ children, sidebarState }) => (
  <ul>
  {
    children(sidebarState)
  }
  </ul>
);

<List sidebarState={sidebarState}>
  {
    (sidebarState) => (
      <Item sidebarState={sidebarState} />
    )
  }
</List>

React.cloneElement

工作示例：

const { Component } = React;

const Item = ({ sidebarState }) => (
  <li>{sidebarState ? 'open' : 'close'}</li>
);

const List = ({ children, sidebarState }) => (
  <ul>
  {
    children(sidebarState)
  }
  </ul>
);

class App extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
        sidebarState: true
    }
  }
  
  toggleOpen = () => this.setState((prevState) => ({
    sidebarState: !prevState.sidebarState
  }));
  
  render() {
    const { sidebarState } = this.state;
    
    return (
      <div>
        <button onClick={this.toggleOpen}>Toggle</button>
        
        <List sidebarState={sidebarState}>
          {
            (sidebarState) => (
              <Item sidebarState={sidebarState} />
            )
          }
        </List>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>