将道具传递给静态React组件

Question

I have created a static method in a react Class component when I pass props it does not seem to me that they are passed, however, the children prop for passed without any problem component calling

This is the component and the given props when consoling I receive undefined !! The Component

class Tabel extends Component {
static Head = ({ children, ...props }) => (
    <span className="table-head">
        {children}
    </span>
)

static Body = ({ children, ...props }) => (
    <div className="tabel-body">{children}</div>
)

render = () => (
    <div className='tabel-container' >
        {this.props.children}
    </div>
)

}

I am passing props like this

<Tabel.Cell
  mainContent='$10 175.00'
  subContent={{ content: '12.4%', classes: 'stock-up' }}
/>

Answer 1

you can spread the props and it should not be an issue:

class Tabel extends Component {
static Head = ({ children, ...props }) => (
    <span className="table-head"  {...props}>
        {children}
    </span>
)

static Body = ({ children, ...props }) => (
    <div className="tabel-body" {...props} >{children}</div>
)

render = () => (
    <div className='tabel-container' >
        {this.props.children}
    </div>
)

}

Answer 2

May be try like this

static Head = props => (
    <span className="table-head">
        {props.children}
        {props.prop1Name}
        {props.prop2Name}
    </span>
)