将功能组件 props 传递给 React 中的静态属性

Question

Say, I have a functional React component:

const MyComponent = props => {...}

and I set a static property on it:

MyComponent.layout = MyLayoutComponent

Is there a way to pass/access the props from MyComponent to/in MyLayoutComponent ?

Answer 1

I think you can with something like this

const Bar = (props: any) => {
  console.log('bar props: ', props)
  // {foo: "FOO" ...}
  return <div>bar</div>
}

Bar.displayName = 'Bar'

const Foo = (props: any) => {
  return (
    <div>
      {React.Children.map(props.children, (child: any) => {
        console.log('name: ', child.type?.displayName)
        return React.cloneElement(child, props)
      })}
    </div>
  )
}

Foo.layout = Bar

...

  <Foo foo="FOO">
    <Foo.layout />
  </Foo>

React children api