如何在 react 中添加 if-else 语句以读取 json-schema？

Question

我对 js 和反应还很陌生，所以我希望有人能给我一个解决这个问题的想法。我的解决方案很糟糕，但我想不出一个好的解决方案。我也不知道如何在渲染中添加 if-else 语句。有 6 个按钮，每个按钮都是一个 json-schema 的名称（最好是 table 而不是按钮，但我总是在 table 视图中出错） . 我想在用户单击按钮时显示 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;

Answer 1

您的问题似乎主要与如何构建代码有关。这是您可以通过研究其他人的代码来最好地学习的东西。 github repository 包含很多有用的点点滴滴，可以帮助您解决问题。

为了回答您的问题，我建议您将组件分开。解决方案本身可能对您来说很清楚。也许您可以将您的模式添加到一个对象/地图，然后 select 基于您 ToggleGroup.

中 select 的 activeType 的模式

例如：

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

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

// In your Form-Component

const activeSchema = schemas.get('activeType')

如何在 react 中添加 if-else 语句以读取 json-schema？

How to add an if-else statement in react to read json-schema?

reactjs

json

jsonschema