Question

嗨！我正在尝试呈现动态设置项。

const settingsItemData = [
    {
        settingsCategory: 'Exam',
        settingsCategoryItems: [
            {
                image: LabExamRequestIcon,
                link: '/settings/exam-request',
                label: 'Exam Items',
                col: '4',
                // offset: 4
            },
            {
                image: LabExamRequestIcon,
                link: '/settings/lab-exam-request',
                label: 'Exam Request',
                col: '4',
            }
        ]
    },
    {
        settingsCategory: 'Others',
        settingsCategoryItems: [
            {
                image: LabExamRequestIcon,
                link: '../settings/panel-exam',
                label: 'Panel Exam',
                col: '4'
            },
            {
                image: UserMaintenanceIcon,
                link: '/settings/user-maintenance',
                label: 'User Maintenance',
                col: '4'
            }
        ]
    }
]

我想做的是在左侧显示考试名称。并在右侧显示settingsCategoryItems内部的所有内容。我已经制定了settingsCategory。但是对于settingsCategoryItems，我似乎无法呈现任何内容。

我已经尝试过了：

const Items = settingsItemData.map((item) => (
            <SettingsCard 

                image={item.settingsCategoryItems.image} 
                link={item.settingsCategoryItems.link} 
                label={item.settingsCategoryItems.label} 

            />
        ))

但是没有一个呈现。您通常如何在reactjs中做到这一点？谢谢。

Answer 1

尝试一下。您还必须通过settingsCategoryItems执行第二张地图以使其工作

const Items = settingsItemData.map((item) => (
item.settingsCategoryItems.map(el => (
            <SettingsCard 

                image={el.image} 
                link={el.link} 
                label={el.label} 

            />

））））

Answer 2

item.item.settingsCategoryItems是一个数组，而不是一个对象，因此至少也需要迭代settingsCategoryItems。

您的箭头功能看起来有点奇怪，应该是

(item) => { ... }

而不是

(item) => (....)

此

const Items = settingsItemData.map((item) => {
            <SettingsCard 

                image={item.settingsCategoryItems.image} 
                link={item.settingsCategoryItems.link} 
                label={item.settingsCategoryItems.label} 

            />
        })

可能/应该变成类似

const Items = settingsItemData.map((outerItem) => {
           outerItem.map((item) => {
                  <SettingsCard 
                      image={item.image} 
                      link={item.link} 
                      label={item.label} 
                  />
           })
})

我无法测试它，但希望您能大致了解。

Answer 3

您处在正确的轨道上，但还需要映射{% block forms %} {% if user.is_staff%} <form method="post" action="" enctype="multipart/form-data"> {% csrf_token %} <fieldset> <div style="display: inline-block; margin-left: 22%; text-align: center"><b>Traitements généraux</b>{{ form.general_treatment }}</div> <div style="display: inline-block; text-align: center"><b>Autres traitements</b>{{ form.other }}</div> </fieldset> <p style="margin-top: 2%"> <input id="submit" class="btn btn-primary" type="submit" value="Synchronisation Traitements généraux" name="trtm_gen"/> <input id="submit" class="btn btn-primary" type="submit" value="Synchronisation Autre" name="autre"/> </p> </form> {% endif %} {% endblock %}数组以访问值并绘制要显示的UI（如以下代码段所示）：

settingsCategoryItems

这样，您可以呈现所需的所有数据（然后，可以重构它以使用import React, { Component } from 'react'; import { render } from 'react-dom'; import './style.css'; class Component1 extends Component { state = {}; render() { const settingsItemData = [ { settingsCategory: 'Exam', settingsCategoryItems: [ { image: 'LabExamRequestIcon', link: '/settings/exam-request', label: 'Exam Items', col: '4', // offset: 4 }, { image: 'LabExamRequestIcon', link: '/settings/lab-exam-request', label: 'Exam Request', col: '4', } ] }, { settingsCategory: 'Others', settingsCategoryItems: [ { image: 'LabExamRequestIcon', link: '../settings/panel-exam', label: 'Panel Exam', col: '4' }, { image: 'UserMaintenanceIcon', link: '/settings/user-maintenance', label: 'User Maintenance', col: '4' } ] } ]; const rowItems = settingsItemData.map((item) => { return <div className={`row__${item.settingsCategory}`}> <h1>{item.settingsCategory}</h1> {item.settingsCategoryItems.map(item2 => { return <button>{item2.label}</button>; })} </div>; }); return ( <div className="container"> <h1>Settings</h1> {rowItems} </div> ); } }组件）。

在对象内映射对象-React.js

3 个答案: