如何从 python 中的字典数组中获取 javascript 中的对象数组？

Question

我正在尝试使用 python 中的字典数组作为自定义破折号组件的参数，并将其用作对象数组

在 python 中：

audioList_py = [
    {
        "name": "random",
        "singer": 'waveGAN\'s music',
        "cover":
          'link_1.jpg',
        "musicSrc":
          'link_1.mp3',
    },
    {
        "name": "random",
        "singer": 'waveGAN\'s music',
        "cover":
          'link_2.jpg',
        "musicSrc":
          'link_2.mp3',
    },

 ... etc
]

在Javascript中：

audioList1_js = [
        {
            name: "random",
            singer: 'waveGAN\'s music',
            cover:'link_1.jpg',
            musicSrc: 'link_1.mp3',
        },
        {
            name: "random",
            singer: 'waveGAN\'s music',
            cover: 'link_2.jpg',
            musicSrc: 'link_2.mp3',
        },

     ... etc
    ]

这里是短划线自定义组件的 javascript 代码片段：

export default class MusicComponent extends Component {
    render() {
      const {id, audioLists} = this.props;
        return (
            <div>
                <h1>{id}</h1>
                <ReactJkMusicPlayer audioLists={audio_list}/>,
            </div>
        );
    }
}

MusicComponent.defaultProps = {};

MusicComponent.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    audios: PropTypes.array,
    id: PropTypes.string,

};

并在python中使用生成的组件：

app = dash.Dash(__name__)
app.layout = html.Div([
    music_component.MusicComponent(audios=audioList_py),
    html.Div(id='output'),
    ... etc
])

但是我得到了：

TypeError: The `music_component.MusicComponent` component (version 0.0.1) received an unexpected keyword argument: `audios`Allowed arguments: id

我做错了什么？

任何帮助或建议将不胜感激，非常感谢。

Answer 1

确保在对自定义 React 组件进行更改后运行 npm run build。使用这些 proptypes 你不应该得到那个错误。如果我删除 audios proptype，我可以重现该错误。

此外，您将值传递给 audios 属性:

music_component.MusicComponent(audios=audioList_py)

但您尝试从道具中检索 audioLists：

const {id, audioLists} = this.props;

将此更改为：

const {id, audios} = this.props;

演示

export default class MusicComponent extends Component {
    render() {
        const {id, audios} = this.props;
        return (
            <div>
                <h1>{id}</h1>
                <ReactJkMusicPlayer audioLists={audios} />
            </div>
        );
    }
}

MusicComponent.defaultProps = {};

MusicComponent.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    audios: PropTypes.array,
};

Answer 2

问题已解决，我应该运行 : npm run build:backends 为组件生成 Python、R 和 Julia class 文件，但我正在执行 npm run build:js 并且此命令仅生成 JavaScript 包（不知道新道具）。

并将组件中的音频属性设置为如下所示：

MusicComponent.defaultProps = {audios: audioList1};

MusicComponent.propTypes = {
    id: PropTypes.string,
    audios: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired
};

如何从 python 中的字典数组中获取 javascript 中的对象数组？

How to get array of objects in javascript from an array of dictionaries in python?

javascript

custom-component

reactjs

plotly-dash