Javascript React：当一个变量导入到另一个组件时，如何在一个组件中使用该变量

将值保留在组件外部，以便两者都可以访问它。可以这样做，但作为一个简单的示例，您可以创建一个简单的“存储”来保存它，并从每个需要它的组件引用该存储：

类存储{
setDateRange（newDateRange）{
这是.\u dateRange=newDateRange；
}
获取日期范围（）{
返回此。\u dateRange；
}
}
导出默认新存储（）；//独生子女；每个人都得到相同的实例

从“/store”导入存储；
const WeeklyTrafficCard=（道具）=>{
//使用当前日期范围值
const dateRange=store.dateRange；
//设置新的日期范围
store.setDateRange（newDateRange）；
//做其他事情
}

从“/store”导入存储；
const WeeklyTrafficCardContainer=（道具）=>{
//使用当前日期范围值
const dateRange=store.dateRange；
//设置新的日期范围
store.setDateRange（newDateRange）；
//做其他事情
}

如果希望存储更新触发组件重新渲染，则需要添加一些管道，如redux的connect，或其他触发更新的机制：

//伪代码；使存储成为事件发射器并返回
//在存储事件中重新呈现的组件
store.connect=组件=>{
返回道具=>{
React.useffect（（）=>{
store.addEventListener（…）
return（）=>store.removeEventListener（…）
})
}
}

---

或者，如果组件共享一个公共父级，则可以将信息传递给父级，并将信息作为道具传递给每个组件。如果任一组件更新该值，则父状态更改将触发使用新值重新渲染两个组件：

import React, { useContext, useEffect, useState } from 'react';
import { WeeklyTrafficCard } from './WeeklyTrafficCard';
import { AppContext } from 'contexts/App';
import { API_URL } from 'constants/index.js';
import { todayOpen, todayClose } from 'helpers';
import moment from 'moment';

const WeeklyTrafficCardContainer = (props) => {
  const { API } = useContext(AppContext);
  const { store = {} } = props;
  const [data, setData] = useState([]);
  const open = todayOpen(store.hours, store.timezone);
  const close = todayClose(store.hours, store.timezone);

  useEffect(() => {
    async function fetchData() {
      const result = await API.get(`${API_URL}/api/aggregates`, {
        params: {
          each_daterange,
          every: '1h',
          hourStart: 13,
          hourStop: 4
        },
      });

const Parent=（）=>{
常量[dateRange，setDateRange]=React.useState（）；
返回(
setDateRange（新范围）}
/>
setDateRange（新范围）}
/>
);
}

将值保留在组件外部，以便两者都可以访问。可以这样做，但作为一个简单的示例，您可以创建一个简单的“存储”来保存它，并从每个需要它的组件引用该存储：

类存储{
setDateRange（newDateRange）{
这是.\u dateRange=newDateRange；
}
获取日期范围（）{
返回此。\u dateRange；
}
}
导出默认新存储（）；//独生子女；每个人都得到相同的实例

从“/store”导入存储；
const WeeklyTrafficCard=（道具）=>{
//使用当前日期范围值
const dateRange=store.dateRange；
//设置新的日期范围
store.setDateRange（newDateRange）；
//做其他事情
}

从“/store”导入存储；
const WeeklyTrafficCardContainer=（道具）=>{
//使用当前日期范围值
const dateRange=store.dateRange；
//设置新的日期范围
store.setDateRange（newDateRange）；
//做其他事情
}

如果希望存储更新触发组件重新渲染，则需要添加一些管道，如redux的connect，或其他触发更新的机制：

//伪代码；使存储成为事件发射器并返回
//在存储事件中重新呈现的组件
store.connect=组件=>{
返回道具=>{
React.useffect（（）=>{
store.addEventListener（…）
return（）=>store.removeEventListener（…）
})
}
}

---

或者，如果组件共享一个公共父级，则可以将信息传递给父级，并将信息作为道具传递给每个组件。如果任一组件更新该值，则父状态更改将触发使用新值重新渲染两个组件：

import React, { useContext, useEffect, useState } from 'react';
import { WeeklyTrafficCard } from './WeeklyTrafficCard';
import { AppContext } from 'contexts/App';
import { API_URL } from 'constants/index.js';
import { todayOpen, todayClose } from 'helpers';
import moment from 'moment';

const WeeklyTrafficCardContainer = (props) => {
  const { API } = useContext(AppContext);
  const { store = {} } = props;
  const [data, setData] = useState([]);
  const open = todayOpen(store.hours, store.timezone);
  const close = todayClose(store.hours, store.timezone);

  useEffect(() => {
    async function fetchData() {
      const result = await API.get(`${API_URL}/api/aggregates`, {
        params: {
          each_daterange,
          every: '1h',
          hourStart: 13,
          hourStop: 4
        },
      });

const Parent=（）=>{
常量[dateRange，setDateRange]=React.useState（）；
返回(
setDateRange（新范围）}
/>
setDateRange（新范围）}
/>
);
}

您应该使用

useffect

（prop drilling）将变量传递给您的父级：

const Parent = () => {
  const [dateRange, setDateRange] = React.useState();

  return (
    <>
      <WeeklyTrafficCardContainer
        dateRange={dateRange}
        onDateRangeChange={newRange => setDateRange(newRange)}
      />
      <WeeklyTrafficCard
        dateRange={dateRange}
        onDateRangeChange={newRange => setDateRange(newRange)}
      />
    </>
  );
}

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[myVar，setMyVar]=React.useState（“”）；
返回(
{myVar}
);
};
const Child=（{setMyVar}）=>{
const myChildVar=“你好，世界！”
React.useffect（（）=>setMyVar（myChildVar），[]）；
这是孩子
}
渲染（
您应该使用
useffect
（prop drilling）将变量传递给父对象：

const Parent = () => {
  const [dateRange, setDateRange] = React.useState();

  return (
    <>
      <WeeklyTrafficCardContainer
        dateRange={dateRange}
        onDateRangeChange={newRange => setDateRange(newRange)}
      />
      <WeeklyTrafficCard
        dateRange={dateRange}
        onDateRangeChange={newRange => setDateRange(newRange)}
      />
    </>
  );
}

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[myVar，setMyVar]=React.useState（“”）；
返回(
{myVar}
);
};
const Child=（{setMyVar}）=>{
const myChildVar=“你好，世界！”
React.useffect（（）=>setMyVar（myChildVar），[]）；
这是孩子
}
呈现（
对问题的理解

您希望将数据从子级向上传递给父级

管理父项中的每个日期范围：

您可以在父项中声明并传递其setter函数，而不是在子项中创建
useState
变量
each_daterange
。例如：

const WeeklyTrafficCardContainer=（道具）=>{
常量[eachDaterRange，seteachDaterRange]=useState（）；
返回(
{/*您的报税表*/}
)
}

如果需要在交通卡中显示
eachDaterRange
，或者交通卡需要完全拥有该变量，则可以在父级中创建另一个状态变量，并将回调传递给子级（基本上是上述内容，但现在有两个不同的状态变量）

父母变成

const WeeklyTrafficCardContainer=（道具）=>{
const[requestDateRange，setRequestDateRange]=useState（）；
const updateRequestDateRange=（dateRange）=>{
setRequestDateRange（日期范围）
}
返回(
{/*您的报税表*/}
)
}

然后在你的
WeeklyTrafficCard
call
props.UpdatedTerange