Dash Component Rendering Behavior Question

Dash Python
1

I am working on a dash component library am learning some of the nuances of how dash handles react components. One of the things I think I’ve discovered is that dash only seems to convert python dash components to jsx if they are stored in the children prop of another dash component. I’d like to know if there is a way around this limitation.

For example, consider this card component example from ant design. The card component has a cover prop in which there is an img component. If I were to build a dash component for the antd card, I’d like to be able to pass an html.Img() object to the cover attribute of the python Card object. However, what I am finding is that the html.Img object will not be converted to jsx unless it is put in the children attribute of the Card object.

import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

const { Meta } = Card;

ReactDOM.render(
  <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
      title="Card title"
      description="This is the description"
    />
  </Card>,
  mountNode,
);

Is this issue a ridged limitation of dash? Or is there a way around it? I essentially would like to be able to do something like below and have everything render nicely.

import antd
import dash_html_components as html

app.layout = [
    antd.Card(
        cover = html.Img(src = "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"),
        children = [
            antd.Meta(
                avatar = antd.Avater(
                    src = "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
                    title = "Title",
                    description = "Description"
                )
            )
        ]
    )
]
2

I’ve come across this previously too - https://community.plotly.com/t/passing-components-into-a-custom-component-not-as-children . Unfortunately that seems to be a limitation of dash at the moment, although there could be workarounds that I am not aware of.

3

I have also asked about this limitation before, but it seems there is no (easy) way around it. I have previously kind-of-gotton-around-it, but it requires a fair amount of hacking at the moment.