Reactjs 如何将变量导出到另一个文件_Reactjs

Reactjs 如何将变量导出到另一个文件

reactjs

Reactjs 如何将变量导出到另一个文件,reactjs,Reactjs,我正在做一个程序，从API获取信息。我让fetch调用正常工作，但我的目标是在另一个文件中的表单中显示作为预填充信息的信息，但我不知道应该如何导出变量以及如何在另一个文件中使用它们这是我的FetchCall.js： import Axios from 'axios' import { useState } from 'react'; function FetchCall() { const[name,setName] = useState("") con

我正在做一个程序，从API获取信息。我让fetch调用正常工作，但我的目标是在另一个文件中的表单中显示作为预填充信息的信息，但我不知道应该如何导出变量以及如何在另一个文件中使用它们

这是我的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;

从“Axios”导入Axios
从“react”导入{useState}；
函数FetchCall（）{
const[name，setName]=useState（“”）
常量[出生，挫折]=使用状态（“”）
const[email，setEmail]=useState（“”）
const[insuranceNo，setInsuranceNo]=useState（“”）
常量[phoneNo，setPhoneNo]=useState（“”）
const getInfo=（）=>{
Axios.get（“https://api.randomuser.me/那么(
（回应）=>{
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]。电子邮件）
setInsuranceNo（response.data.results[0].login.sha1）
setPhoneNo（response.data.results[0].phone）
}
);
};
返回(
你好
获取用户
{name}
{出生}
{email}
{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;

函数InputTextFilled（）{
返回(
全名
出生日期
国民保险号码
电子邮件地址
电话号码
);
}
导出默认输入并填写；

React Props类似于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;

从“Axios”导入Axios；
从“react”导入{useState}；
函数FetchCall（）{
const[name，setName]=useState（“”）；
常量[出生，挫折]=使用状态（“”）；
const[email，setEmail]=useState（“”）；
const[insuranceNo，setInsuranceNo]=useState（“”）；
const[phoneNo，setPhoneNo]=useState（“”）；
const getInfo=（）=>{
Axios.get（“https://api.randomuser.me/）然后（（回应）=>{
集合名(
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）；
});
};
返回(
你好
获取用户
{name}
{出生}
{email}
{insuranceNo}
{phoneNo}
{/*//这是子组件*/}
);
}
导出默认抓取调用；

在功能性无状态组件中，道具在函数签名中作为参数接收：

//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>
);

//子组件示例1
const DisplayExample1=（{姓名、出生、保险号、电话号}）=>(
全名
出生日期
国民保险号码
电子邮件地址
电话号码
);

React的道具可以通过定义自定义的HTML属性在React中传递数据，您可以使用JSX语法将数据分配给这些属性。所以别忘了花括号。 //子组件示例2（类组件）

class DisplayExample2扩展组件{
render（）{
返回(
全名
出生日期
国民保险号码
电子邮件地址
电话号码
);
}
}

React Props类似于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;

从“Axios”导入Axios；
从“react”导入{useState}；
函数FetchCall（）{
const[name，setName]=useState（“”）；
常量[出生，挫折]=使用状态（“”）；
const[email，setEmail]=useState（“”）；
const[insuranceNo，setInsuranceNo]=useState（“”）；
const[phoneNo，setPhoneNo]=useState（“”）；
const getInfo=（）=>{
Axios.get（“https://api.randomuser.me/）然后（（回应）=>{
集合名(
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）；
});
};
返回(
你好
获取用户
{name}
{出生}
{email}
{insuranceNo}
{phoneNo}
{/*//这是子组件*/}
);
}
导出默认抓取调用；

在功能性无状态组件中，道具在函数签名中作为参数接收：

//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>
);

//子组件示例1
const DisplayExample1=（{姓名、出生、保险号、电话号}）=>(