Блог

Главная - Вопросы по программированию - Как я могу экспортировать переменную в другой файл React

Как я могу экспортировать переменную в другой файл React

#reactjs

#reactjs

Вопрос:

Я делаю программу, которая получает информацию из https://api.randomuser.me / API. У меня сработал вызов выборки, но моя цель — отобразить информацию в виде предварительно заполненной информации в форме, расположенной в другом файле, но я не знаю, как я должен экспортировать переменные и как их использовать в другом файле.

Это мой FetchCall.js:

 import Axios from 'axios'
import { useState } from 'react';



function FetchCall() {
  
  const[name,setName] = useState("")
  const[birth,setBirth] = useState("")
  const[email,setEmail] = useState("")
  const[insuranceNo, setInsuranceNo] = useState("")
  const[phoneNo, setPhoneNo] = useState("")

  const getInfo = () => {
  Axios.get("https://api.randomuser.me/").then(
    (response) => {
      setName(response.data.results[0].name.first   " "   response.data.results[0].name.last);
      setBirth(response.data.results[0].dob.date);
      setEmail(response.data.results[0].email)
      setInsuranceNo(response.data.results[0].login.sha1)
      setPhoneNo(response.data.results[0].phone)

    }
  );
};

  return(
    <div>
      Hello 
      <button onClick={getInfo}>Get User</button>
      <div>
        {name}
      </div>
      <div>
        {birth}
      </div>
      <div>
        {email}
      </div>
      <div>
        {insuranceNo}
      </div>
      <div>
        {phoneNo}
      </div>
    </div>
  );
}

export default FetchCall;

И вот где я хочу экспортировать переменные (имя, рождение, адрес электронной почты, insuranceNo, phoneNo)

импортировать FetchCall из ‘./fetchCall’;

 function InputTextFilled() {
  return (
    <div className="inputText has-text-left">
      <fieldset disabled>
        <div className="field">

          <div className="control">
            <p className="label">Full Name</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <a className="label">Date of Birth</a>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">National Insurance Number</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">Email Address</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">Telephone Number</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

        </div>
      </fieldset>
    </div>
  );
}

export default InputTextFilled;

Комментарии:

1. Я думаю, вам не хватает одного из самых фундаментальных способов управления данными в React, props . Вам нужно получить ваши данные выше в дереве компонентов и передать их в качестве реквизита тем компонентам, которые в них нуждаются. Существуют и другие способы управления состоянием, такие как Redux или Context API, но это более продвинутый способ, и вам действительно следует прочитать документацию, чтобы понять, как сначала использовать props и создавать компоненты.

Ответ №1:

Реквизиты React подобны аргументам функции в JavaScript и атрибутам в HTML. Для отправки реквизитов в компонент используйте тот же синтаксис, что и атрибуты HTML.

 import Axios from "axios";
import { useState } from "react";
function FetchCall() {
  const [name, setName] = useState("");
  const [birth, setBirth] = useState("");
  const [email, setEmail] = useState("");
  const [insuranceNo, setInsuranceNo] = useState("");
  const [phoneNo, setPhoneNo] = useState("");

  const getInfo = () => {
    Axios.get("https://api.randomuser.me/").then((response) => {
      setName(
        response.data.results[0].name.first  
          " "  
          response.data.results[0].name.last
      );
      setBirth(response.data.results[0].dob.date);
      setEmail(response.data.results[0].email);
      setInsuranceNo(response.data.results[0].login.sha1);
      setPhoneNo(response.data.results[0].phone);
    });
  };

  return (
    <div>
      Hello
      <button onClick={getInfo}>Get User</button>
      <div>{name}</div>
      <div>{birth}</div>
      <div>{email}</div>
      <div>{insuranceNo}</div>
      <div>{phoneNo}</div>
      {/* //This is the child compoennt */}
      <DisplayExample1
        name={name}
        birth={birth}
        email={email}
        insuranceNo={insuranceNo}
        phoneNo={phoneNo}
      />
      <DisplayExample2
        name={name}
        birth={birth}
        email={email}
        insuranceNo={insuranceNo}
        phoneNo={phoneNo}
      />
    </div>
  );
}

export default FetchCall;

В функциональном компоненте без состояния реквизиты принимаются в сигнатуре функции в качестве аргументов:

 //Child Component Example 1

const DisplayExample1 = ({ name, birth, insuranceNo, phoneNo }) => (
  <div className="inputText has-text-left">
    <fieldset disabled>
      <div className="field">
        <div className="control">
          <p className="label">Full Name</p>
          <input className="input" type="text" value={name} />
        </div>

        <div className="control mt-5">
          <a className="label">Date of Birth</a>
          <input className="input" type="text" value={birth} />
        </div>

        <div className="control mt-5">
          <p className="label">National Insurance Number</p>
          <input className="input" type="text" value={insuranceNo} />
        </div>

        <div className="control mt-5">
          <p className="label">Email Address</p>
          <input className="input" type="text" value={email} />
        </div>

        <div className="control mt-5">
          <p className="label">Telephone Number</p>
          <input className="input" type="text" value={phoneNo} />
        </div>
      </div>
    </fieldset>
  </div>
);

Реквизит React может передавать данные в React, определяя пользовательские атрибуты HTML, которым вы присваиваете свои данные с помощью синтаксиса JSX. Поэтому не забывайте о фигурных скобках.
//Дочерний компонент Пример 2 (компонент класса)

 class DisplayExample2 extends Component {
  render() {
    return (
      <div className="inputText has-text-left">
        <fieldset disabled>
          <div className="field">
            <div className="control">
              <p className="label">Full Name</p>
              <input className="input" type="text" value={this.props.name} />
            </div>

            <div className="control mt-5">
              <a className="label">Date of Birth</a>
              <input className="input" type="text" value={this.props.birth} />
            </div>

            <div className="control mt-5">
              <p className="label">National Insurance Number</p>
              <input
                className="input"
                type="text"
                value={this.props.insuranceNo}
              />
            </div>

            <div className="control mt-5">
              <p className="label">Email Address</p>
              <input className="input" type="text" value={this.props.email} />
            </div>

            <div className="control mt-5">
              <p className="label">Telephone Number</p>
              <input className="input" type="text" value={this.props.phoneNo} />
            </div>
          </div>
        </fieldset>
      </div>
    );
  }
}