Question

我有一个来自bootstrap主题的导航栏，我在react中使用了

工作原理是有一个内置的媒体查询，该查询是一个下拉列表，而不是一个下拉菜单来处理下拉列表

Argument(s) are different! Wanted:
bookRentalsRepository.save(
    bookrental.model.book.BookRentals@7574b32f
);
-> at bookrental.service.book.rentals.BookRentalServiceTest.rentBook(BookRentalServiceTest.java:48)
Actual invocation has different arguments:
bookRentalsRepository.save(
    bookrental.model.book.BookRentals@1c62c511
);
-> at bookrental.service.book.rentals.BookRentalService.rentBook(BookRentalService.java:36)

Comparison Failure:  <Click to see difference>

Argument(s) are different! Wanted:
bookRentalsRepository.save(
    bookrental.model.book.BookRentals@7574b32f
);
-> at bookrental.service.book.rentals.BookRentalServiceTest.rentBook(BookRentalServiceTest.java:48)
Actual invocation has different arguments:
bookRentalsRepository.save(
    bookrental.model.book.BookRentals@1c62c511
);
-> at bookrental.service.book.rentals.BookRentalService.rentBook(BookRentalService.java:36)

    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:488)
    at bookrental.service.book.rentals.BookRentalServiceTest.rentBook(BookRentalServiceTest.java:48)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:564)
    at org.junit.runners.model.FrameworkMethod$1.runReflectiveCall(FrameworkMethod.java:50)
    at org.junit.internal.runners.model.ReflectiveCallable.run(ReflectiveCallable.java:12)
    at org.junit.runners.model.FrameworkMethod.invokeExplosively(FrameworkMethod.java:47)
    at org.junit.internal.runners.statements.InvokeMethod.evaluate(InvokeMethod.java:17)
    at org.junit.runners.ParentRunner.runLeaf(ParentRunner.java:325)
    at org.junit.runners.BlockJUnit4ClassRunner.runChild(BlockJUnit4ClassRunner.java:78)
    at org.junit.runners.BlockJUnit4ClassRunner.runChild(BlockJUnit4ClassRunner.java:57)
    at org.junit.runners.ParentRunner$3.run(ParentRunner.java:290)
    at org.junit.runners.ParentRunner$1.schedule(ParentRunner.java:71)
    at org.junit.runners.ParentRunner.runChildren(ParentRunner.java:288)
    at org.junit.runners.ParentRunner.access$000(ParentRunner.java:58)
    at org.junit.runners.ParentRunner$2.evaluate(ParentRunner.java:268)
    at org.junit.runners.ParentRunner.run(ParentRunner.java:363)
    at org.mockito.internal.runners.JUnit45AndHigherRunnerImpl.run(JUnit45AndHigherRunnerImpl.java:37)
    at org.mockito.runners.MockitoJUnitRunner.run(MockitoJUnitRunner.java:62)
    at org.junit.runner.JUnitCore.run(JUnitCore.java:137)
    at com.intellij.junit4.JUnit4IdeaTestRunner.startRunnerWithArgs(JUnit4IdeaTestRunner.java:68)
    at com.intellij.rt.execution.junit.IdeaTestRunner$Repeater.startRunnerWithArgs(IdeaTestRunner.java:47)
    at com.intellij.rt.execution.junit.JUnitStarter.prepareStreamsAndStart(JUnitStarter.java:242)
    at com.intellij.rt.execution.junit.JUnitStarter.main(JUnitStarter.java:70)

i然后有条件地渲染导航栏的内容

mysql_query("select distinct Name from exam1sem.invcount2  WHERE Name not in 
(select  Name from exam1sem.invcount2 where Date='$date' AND Time='$time'
 union select  Name from exam1sem.reserve1 where Date='$date' AND 
Time='$time') 

union

select distinct Name from exam1sem.reserve1 WHERE Name not in (select  Name 
from exam1sem.invcount2 where Date='$date' AND Time='$time'
union select  Name from exam1sem.reserve1 where Date='$date' AND 
Time='$time'
)  

order by Avail, TD, NOD
");

我的问题是，当屏幕处于全长时，仅当navClosed状态为true时才显示项目，因此，如果为false，则除非将屏幕放到屏幕上，否则不会显示内容。较低的宽度，并显示切换按钮。

我想知道您是否可以制作某种lifeCycleHook或条件处理程序，以检查屏幕的宽度，然后设置状态（如果宽度达到某个断点）

 <button class="navbar-toggler collapsed" type="button" onClick={this.onToggleNav} data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

Answer 1

如果是supported by your browser，一种解决方案是使用Resize Observer API。

您可以在组件中添加以下内容：

config.h

当宽度达到特定阈值时，将更新状态。

Resize Observer documentation

使navbar有条件，在ReactJS中转换为下拉菜单

1 个答案: