Question

因此，我尝试在模块iteamsHolder中构建页面之后收集节点。它适用于主App组件，当我调用其中的模块iteamsHolder时，它会看到所有收集的迭代。

但是当我尝试将带有iteams的iteamsHolder模块转移到App的子组件时，我对此模块迭代有一个error或undefined。所以，我理解问题出在组件队列渲染中。但是我们如何才能解决这个错误？

/ * 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 * /

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;

/与嵌套的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
    )
}

Answer 1

您收到undefined因为iteamsHolder返回的是默认值'Sorry'，而不是对象{ iteamsMain, iteamsSupport }。如果你改变是：

<MenuButtonOpen
  state={this.state.toggle}
  updateState={this.updateState}
  iteamsHolder={iteamsHolder()}
/>

您会看到'Sorry'正在传递给组件。这是因为在评估iteamsHolder时，网页尚未完全加载。不知道为什么你按照你的方式构建你的代码，我无法就如何“修复”它提出一个很好的建议。可能有用的是查看document.readyState的工作原理以及阅读suggestions like what's listed here。

反应。如何收集和转移节点集合作为道具给孩子们

1 个答案: