如何在响应读取 json-schema 时添加 if-else 语句？答案

【问题标题】：How to add an if-else statement in react to read json-schema?如何在响应读取 json-schema 时添加 if-else 语句？
【发布时间】：2023-04-10 23:59:01
【问题描述】：

我对 js 很陌生，所以我希望有人能给我一个关于这个问题的想法。我的解决方案非常糟糕，但我想不出一个好的解决方案。我也不知道如何在渲染中添加 if-else 语句。有 6 个按钮，每个按钮都是 json-schema 的名称（最好有一个表格而不是按钮，但我在使用 tableview 时总是出错）。我想在用户单击按钮时显示 json-schema，以便用户可以提交 json 文件。

import React, { Component, useState } from 'react';
import { Row, Col } from 'react-bootstrap';
import { withTheme } from '@rjsf/core';
import schema1 from '../schemas/schema1.json';
import schema2 from '../schemas/schema2.json';
import { Datagrid, TextField, EditButton, DeleteButton } from 'react-admin';

class MyApp extends Component {

    constructor(props) {
        super(props);
        this.clickme = this.clickme.bind(this);
    }
    

    ToggleGroup() {
        const theme = {
            blue: {
                default: '#3f51b5',
                hover: '#283593',

            },
            pink: {
                default: '#000000',
                hover: '#ad1457'
            }
        }
        



        
          
        return (<div>
            {types.map(type => (

                <Col>
                    <Col>
                        <Button
                            active={active === type}
                        >{type}</Button>
                    </Col>
                </Col>
            ))}
            <Col>
           <Form
            schema={schema1}     
          
          />
          </Col>
        </div>
        );
    }

    render() {
        return (
            <>
                <Col>
                    <Col>
                        <text>
                            List of schemas
                        </text>
                    </Col>
                </Col>
                <this.ToggleGroup />

            </>
        );
    }
}


export default MyApp;

【问题讨论】：

标签： reactjs json jsonschema

【解决方案1】：

您的问题似乎主要在于如何构建代码。这是你可以通过研究其他人的代码来学习的最好的东西。这个github repository 包含许多可以帮助您的重要信息。

要回答您的问题，我建议您将组件分开。解决方案可能会让您自己清楚。也许您可以将架构添加到对象/映射中，然后根据您在 ToggleGroup 中选择的 activeType 选择架构。

例如：

import schema1 from '../schemas/schema1.json';
...

const schemas = new Map([
  ['schema1', schema1],
  ['schema2', schema2],
  ...
]);

// In your Form-Component

const activeSchema = schemas.get('activeType')

【讨论】：