标签: reactjs

我试图在反应的每个时间间隔更改文本（屏幕出现时自动开始），但问题是，给定的时间不被尊重，并且文本以随机时间间隔更改。这是我的代码的一部分：

const names = [
    'tony', 'elias', 'fadi'
]

const [newName, setnewName] = useState(0);

useEffect(() => {
    for (const [index, value] of names.entries()) {
        setTimeout(() => { shuffle(value) }, 5000);
    }
})

const shuffle = (value) => {
    setnewName(value);
}

谢谢你！

我正在尝试构建一个反应应用程序，我必须使用多个图像，现在我必须导入我将使用的每个图像，例如：

import image from '/img/img1.png';

<img src={img} />

或者还有其他方法吗？？？，

PS：我尝试过“require”，它也给出了一个错误：

<img src={windows.location.origin +'/img/img1.png'}/>

没有输出

我想要这样的东西：

mockFunctions.ts

jest.mock('../utils', () => {
  return {
     getNumbers: () => [1,2,3]
  }
})

__tests__/test1.ts

---import from mockFunctions---
...
it('After adding another number array has more elements', () => {
   const numbers = <get these numbers using mock function>
   expect([...numbers, 11]).toHaveLength(4);
})

__tests__/test2.ts

---import from mockFunctions---
...
it('After removing a number, array has less elements', () => {
   const numbers = <get these numbers using mock function>
   expect(numbers.filter(x => x>1)).toHaveLength(2);
})

是否可以有一个实现模拟函数的文件，然后将它们导入到多个测试文件中？

我的组件看起来像这样：（它具有更多功能和列，但我没有包含它以使示例更简单）

const WeatherReport: FunctionComponent<Props> = ({ cityWeatherCollection, loading, rerender }) => {\n  /* some use effects skipped */\n  /* some event handlers skipped */\n\n  const columns = React.useMemo(() => [\n    {\n      header: 'City',\n      cell: ({ name, title }: EnhancedCityWeather) => <Link to={`/${name}`} className="city">{title}</Link>\n    },\n    {\n      header: 'Temp',\n      cell: ({ temperature }: EnhancedCityWeather) => (\n        <div className="temperature">\n          <span className="celcius">{`${temperature}\xc2\xb0C`}</span>\n          <span className="fahrenheit">{` (~${Math.round(temperature * (9 / 5)) + 32}\xc2\xb0F)`}</span>\n        </div>\n      )\n    },\n    {\n      header: '',\n      cell: ({ isFavorite } : EnhancedCityWeather) …

我用于@react-native-community/slider我的应用程序，但我面临一个问题，它的高度没有改变，它的宽度在改变，但高度没有改变，有人知道为什么吗？而且我想渲染滑块的值，就像滑块拇指内的蓝色容器一样，有没有办法做到这一点？请帮忙

这是我的滑块代码

<View>
          <Text style={[style.fontSize15Med, styles.font15]}>
            Number of surveys
          </Text>
          <View style={styles.daysCont}>
            <Text style={[style.fontSize12Med, styles.surveys]}>
              {this.state.surveys}
            </Text>
          </View>
          <Slider
            style={{width: 320, height: 30, marginLeft: 40}}
            minimumValue={0}
            maximumValue={10}
            step={1}
            maximumTrackTintColor={colors.DarkBlue}
            minimumTrackTintColor={colors.primary}
            thumbTintColor={colors.skyBlue}
            value={this.state.surveys}
            onValueChange={(val) => this.setState({surveys: val})}
          />
        </View>

getByText和 和有什么区别getByTestId？

当我测试 React 组件时，这两个功能之间存在一些差距。

在代码中测试失败getByText，但在getByTestId.

我有代码，当单击某个元素时，标题的颜色变为红色。

为什么会有这样的差别呢？

Container我省略了和的样式组件Content。这具有“切换”道具以将颜色更改为红色。

这是getByText代码：

const { getByText } = render(<ListPresenter content={ListText} />);
const colorChangedText = getByText(/the party/);
fireEvent.click(colorChangedText);
screen.debug(); // The result of render I want !
expect(colorChangedText).toHaveStyle("color: red");    * failed

这是getByTestId代码：

const { getByText } = render(<ListPresenter content={ListText} />);
fireEvent.click(getAllByTestId("list-element-toggle")[0]);
screen.debug(); // The result of render I want !
const colorChangedText = getAllByTestId("list-element-content")[0];
expect(colorChangedText).toHaveStyle("color: red");   * success

这是渲染的组件：

const …

我正在尝试从以下 URL 下载 onclick 文件：

https://firebasestorage.googleapis.com/v1/b/brand-250.appspot.com/o/downloadLinks%2FIMG_4584.jpeg?alt=media&token=98634702-5f21-4b9f-bfcb-71566e4526cd

但是，当我单击 a 标签时，页面会打开并且文件不会下载。知道为什么文件会自动下载吗？

<a
    className="link__button"
    style={buttonStyle}
    href="https://firebasestorage.googleapis.com/v1/b/brand-250.appspot.com/o/downloadLinks%2FIMG_4584.jpeg?alt=media&token=98634702-5f21-4b9f-bfcb-71566e4526cd"
    target="_blank"
    download
  >
    <div className="link__infoContainer">
      <div className="link__left"></div>
      <div className="link__middle">{downloadTitle}</div>
      <div className="link__right"></div>
    </div>
  </a>

我正在将类组件重构为功能组件。

在我的测试文件中，我使用的是酶，但我正在迁移到反应测试库

这是我正在使用酶进行的测试

it('should change module when clicked button login', () => {
     const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
     const instance = wrapper.instance()

     jest.spyOn(instance, 'setModule')
     wrapper.find('button#login-button').simulate('click')

     expect(instance.setModule).toHaveBeenCalled()
   })

这就是我尝试使用react-testing-library 做的事情

it('should change module when clicked button login', async () => {
     const { getByTestId } = render(<SignUp setModuleCallback={jest.fn()} />)
     const instance = getByTestId('submit')

     jest.spyOn(instance, 'setModule')

     const button = await waitFor(() => getByTestId('submit'))

     act(() => {
       fireEvent.click(button)
     })

     expect(instance.setModule).toHaveBeenCalled()
   })

这是我收到的错误

我有一个 React/Django 应用程序，它在为生产而构建时的行为与在开发服务器上运行时的行为不同。开发版本就是我想要的样子。

CSS 存在许多问题。文本是不同的字体，并且一些 Bootstrap/Reactstrap 功能将被忽略。请参阅下面的示例屏幕截图。

我认为这个问题与开发服务器处理 css 文件的顺序有关，而不是 Django 通过将构建脚本/build创建的目录中的文件收集到 Django 目录中来服务构建的应用程序的方式/staticfiles。然而，我很困惑这如何有选择地将类应用于同一组件。（见下文 - 大屏幕文本的偏移量不同，而列大小相同）

这是生产版本中主页的屏幕截图，由 Django 本地提供或在 Heroku 上远程提供。（npm run build或者npm run build-local- 请参阅下面的 package.json 文件）

这是它在本地开发服务器上的样子：( npm run start)

特别是，该类offset-md-5在生产版本中被忽略，而其余类则不会，col-md-5例如在两个版本中都适用。

这是相关的组件：

const Photojumbo = () => {
    return(
        <Container className="jumbo-text ">
            <Jumbotron  className="" style={{ backgroundImage: "url(/static/photosquat-cropped.jpg)", backgroundSize: 'cover' }}>

                <Col className="header header-text col-md-5 offset-md-6" >
                    <h3>ytterblog</h3>
                    <p>A blog app and portfolio project by Gabriel …