как выбрать другой json файл для l oop?

Question

Я новичок, чтобы реагировать. Я пишу сценарий в файл l oop UK json (../ data / UK. json) для отображения городов на экране. Внутри Великобритании. json, это список городской информации в Великобритании.

Например: ["Avon", "Бедфордшир" ... ... "Тайрон"]

Код будет l oop этого файла UK json и отображать каждый город на экране. Теперь я хочу добавить параметр, чтобы люди могли выбирать, какую страну показывать. Я добавляю еще один файл 4 json,

импорт FR из "../data/FR.json";

импорт ES из" ../data/ES.json ";

импорт ИТ из" ../data/IT.json";

импорт DE из "../data/DE.json";

Я также создал тип перечисления Locale, но я не знаю, как настроить код в файле кода 3. Не могли бы вы взглянуть?

Могу ли я создать карту в файле кода 3 и исходя из того, какой язык перешел из Home, я могу предоставить файл json. Это работает? Как мне настроить код?

Code file 1

export enum Locale {
    UK = "en-GB",
    DE = "de-DE",
    FR = "fr-FR",
    IT = "it-IT",
    ES = "es-ES"
};

Code file 2

import * as React from "react";
import { Locale } from "../component/testLocale";


type Props = {
    testLocale: Locale.UK
}

export class Home extends React.Component<Props, any> {
    render() {
        return (
            <div className="home-background">
                <Test testLocale={this.props.testLocale}/>
            </div>
        );
    }
}

Code file 3


import React from "react";
import FR from "../data/FR.json";
import ES from "../data/ES.json";
import IT from "../data/IT.json";
import UK from "../data/UK.json";
import DE from "../data/DE.json";


import {Locale} from "./testLocale";

type State = {
  index: number;
  localeDate: string[]
};

type Props = {
  testLocale: Locale;
};

export class Test extends React.Component<Props, State> {
  timerID: number;
  constructor(props: Props) {
    super(props);
    this.state = {
      index: 0,
      localeDate:UK,
    };
    this.timerID=0;

  }

  componentDidMount() {
    this.timerID = window.setInterval(() => this.tick(), this.props.Duration);
  }

  tick(): void {
    let index: number = this.state.index;
    index +=1;
    index = index % this.props.testLocale.length;
    this.setState({ index });
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    const path:string = this.props.testLocale[this.state.index];
    return (
      <div className="hints-on-home-screen">
        <div style={{
          fontSize: this.props.testFontSize
        }}>{UK[this.state.index]}</div>
      </div>
    );
  }
}

Answer 1

Вы можете сделать что-то вроде приведенного ниже кода. Добавьте все местные жители в объект. Затем при изменении выбора обновите localData.

import React from "react";
import ES from "../data/ES.json";
import IT from "../data/IT.json";
import UK from "../data/UK.json";

const locals = {
  UK: UK,
  ES: ES,
  IT: IT
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      index: 0,
      selectedLocal: "UK",
      localData: locals["UK"]
    };
  }

  onChange = e => {
    this.setState({
      index: 0,
      localData: locals[e.target.value],
      selectedLocal: e.target.value
    });
  };

  render() {
    return (
      <div>
        <select value={this.state.selectedLocal} onChange={this.onChange}>
          {Object.keys(locals).map(local => {
            return <option value={local}>{local}</option>;
          })}
        </select>
        <div className="hints-on-home-screen">
          <div
            style={{
              fontSize: this.props.testFontSize
            }}
          >
            {this.state.localData[this.state.index]}
          </div>
        </div>
      </div>
    );
  }
}

Answer 2

В компоненте Home создайте select со всеми странами как options. Сохраните состояние и обновите его после onChange и передайте его в Test компонент.

Домашний компонент

import * as React from "react";
import { Locale } from "../component/testLocale";


type Props = {
    testLocale: Locale.UK
}

export class Home extends React.Component<Props, any> {
    state = {
        testLocale: Locale.UK
    }
    handleChange = (e) => {
        this.setState({testLocale: e.target.value})
    }
    render() {
        return (
            <div className="home-background">
                <select onChange={this.handleChange} value={this.state.testLocale}>
                    {Object.keys(Locale).map(country => <option value={Locale[country]}>{country}</option>)}
                </select>
                <Test testLocale={this.state.testLocale}/>
            </div>
        );
    }
}

Answer 3

См. Это решение,

Обратите особое внимание на то, как все настроено.

Это общая стратегия манипулирования элементами с использованием структур состояния и данных.

Пример решения Stackblitz

Answer 4

что вы хотите сделать, это добавить какой-нибудь способ получить выбранный json от пользователя, Picker (это выпадающий список) - хороший выбор для этого, передать ему списки перечислений у вас есть, и вы делаете state с именем local или что-то еще, вы будете использовать это состояние для обработки выбранного локального, поэтому у вас будет что-то подобное для вашего Picker onValueChange

onValueChange={(itemValue, itemIndex) => setSelectedLocal(itemValue)}

Обратите внимание, что реагирующий натив использует hook api в вашем случае, вы делаете что-то вроде:

onValueChange={(itemValue, itemIndex) => this.setState({locale: itemValue})}

и используете local в качестве опоры для Test

<Test testLocale={this.props.local}/>