我有两个嵌套在App
Component上的CarouselComponent和BannerComponent组件。我想在CarouselComponent中获得BannerComponent中的元素以进行滚动功能。
代码在这里;
-– App.js
....
<App>
<BannerComponent />
<CarouselComponent />
</App>
....
-– BannerComponent.js
...
return(
<div className="banner-div" id="banner-div">
</div>
);
...
-– CarouselComponent.js
...
scrollTo() {
document.getElementById("banner-div") // This doesn't work
}
...
return(
<a onClick={this.scrollTo}></a>
);
我想知道在所有情况下如何在React js中获取元素。
React ref
将在这里工作。
class SomeComp extends React.Component{
constructor(){
this.carRef = React.createRef(); //create ref
}
render(){
return(
<div>
<App>
<BannerComponent carRef={this.carRef}/> //pass ref in Banner Component to attach it to required DOM.
<CarouselComponent carRef={this.carRef}/> //pass ref to CarouselComponent to use it
</App>
</div>
)
}
}
BannerComponent
class BannerComponent extends React.Component{
render(){
return(
<div className="banner-div" id="banner-div" ref={this.props.carRef}>
</div>
);
}
}
轮播组件
class CarouselComponent extends React.Component{
scrollTo() {
this.props.carRef.current.scrollTo(50)
}
}
问题内容: 如何从Redux表单传递数据,以便可以在App.js中访问该数据?这是我使用redux- form编写的代码。单击提交后,数据应该从form.js传递到app.js. 并且数据应显示在页面上。 这是form.js- 如何将输入的数据传递给app.js? 问题答案: 您需要做的就是获取值 因此,在App.js中,您可以拥有
问题内容: 许多模板语言都有“ slots”或“ yield”语句,它们允许进行某种形式的控制反转,以将一个模板包装在另一个模板中。 Angular具有“ transclude”选项。 Rails有收益声明。如果React.js拥有yield语句,它将看起来像这样: 所需的输出: React,React.js没有。如何定义包装器组件以实现相同的输出? 问题答案: 尝试: 有关更多信息,请参见文档中
许多模板语言都有“slots”或“yield”语句,它们允许进行某种形式的控制反转,将一个模板包装在另一个模板中。 唉,react.js没有。我如何定义包装器组件以实现相同的输出?
问题内容: 因此,单击该按钮后,我可以通过该事件获得该按钮。但是,当我做一个过滤器时,它不会删除所说的按钮。 所以我在构造函数()中有我的数组: 然后我有功能: 但是,其中仍然包含两个元素。 我想过另一种删除它的方法,那就是使用“键”,但是我似乎找不到任何有关获得键值的东西。 问题答案: 首先,您需要绑定到回调函数的范围。如果要访问用于从合成事件呈现按钮的react对象实例,则可以使用privat
问题内容: 我有一个像下面这样的列表,其中第一个元素是id,另一个是字符串: 我只想从此元组列表创建ID列表,如下所示: 我将使用此列表,因此它必须是整数值的列表。 问题答案:
我是Spring Reactive Project的新手。使用中出现问题。我有两个Flux,一个有更多元素,例如 还有人喜欢 如何获取bigFlux中未出现在smallFlux中的元素?我不知道该用哪个接线员。 我尝试过: 但这并不明智,我通过复杂的操作获得了smallFlux,例如查询数据库、平面图操作。这样,bigFlux中有多少元素,这些操作将重复多少次。 事实上,小通量是通过这种方式获得的