[英]React. How to collect and transfer the collection of nodes as props to children
So, I try to collect the nodes after that the page are builded in the module iteamsHolder
. 因此,在模块
iteamsHolder
页面之后,我尝试收集节点。 It works for main App
component and it see all collected iteams when I invoke the module iteamsHolder
inside it. 它适用于主要的
App
组件,当我在其中调用模块iteamsHolder
时,它会看到所有收集的iteam。
But when I try to transfer the iteamsHolder
module with iteams to children componennts of App
, I have an error
or undefined
for this module iteams. 但是,当我尝试将带有iteam的
iteamsHolder
模块转移到App
子组件时,此模块iteams error
或undefined
。 So, I understand that the problem is in the component queue render. 因此,我知道问题出在组件队列渲染中。 But how we can solve that error?
但是我们如何解决该错误呢?
/* MAIN APP COMPONENT */ / *主要应用程序组件* /
import iteamsHolder from '../view/iteamsHolder'
import sidebarWidgetHide from '../view/sidebarWidgetHide'
class App extends React.Component {
constructor(props) {
super(props);
this.handleKeyCode = this.handleKeyCode.bind(this);
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<Fragment>
<Preloader/>
<LeftSideInfo state={this.state.toggle} updateState={this.updateState}
coordY={this.state.coordY}/>
<MenuButtonOpen state={this.state.toggle} updateState={this.updateState}
iteamsHolder={iteamsHolder().iteamsMain}/> // this is where I'm
// trying to transfer the iteams module.
</Fragment>
)
}
/* ITEAM HOLDER MODULE */ / * ITEAM保持器模块* /
const iteamsHolder = () => {
if (document.readyState === "complete") {
let iteamsMain = {
sidebar: document.querySelector('.left-side__column'),
rightColumn: document.querySelector('.right-side__column')
};
let iteamsSupport = {
header: document.querySelectorAll('.menu-button__container'),
menuButton: document.querySelectorAll('.menu-button'),
menuName: document.querySelector('.personal-name'),
experienceblock: document.querySelector('.block-headline.block-headline__experience')
};
return { iteamsMain, iteamsSupport };
} else {
return 'Sorry';
}
};
export default iteamsHolder;
/CHILD COMPONENT WITH NESTED ITEAMS MODULE/ /带有嵌套课程模块的儿童组件/
class MenuButtonOpen extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleScroll = this.handleScroll.bind(this);
}
render() {
return (
{console.log(this.props.iteamsHolder)} // undefined of error
)
}
You're getting undefined
because iteamsHolder
is returning the default value 'Sorry'
, not the object { iteamsMain, iteamsSupport }
. 由于
iteamsHolder
返回默认值'Sorry'
,而不是对象{ iteamsMain, iteamsSupport }
您变得undefined
。 If you change is to: 如果更改为:
<MenuButtonOpen
state={this.state.toggle}
updateState={this.updateState}
iteamsHolder={iteamsHolder()}
/>
you'll see that 'Sorry'
is being passed to the component. 您会看到
'Sorry'
正在传递给组件。 This is because when iteamsHolder
is being evaluated, the webpage is not yet fully loaded. 这是因为在评估
iteamsHolder
时,该网页尚未完全加载。 Without knowing why you've structured your code the way you did, I can't make a good suggestion on how to "fix" it. 不知道为什么要以这种方式来构造代码,就如何“修复”它提出了一个很好的建议。 What may help is looking at how
document.readyState
works and reading through suggestions like what's listed here . 可能有帮助的是查看
document.readyState
工作方式,并通读此处列出的建议 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.