反应 如何收集节点并将其作为道具传递给孩子

Question

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

但是，当我尝试将带有iteam的iteamsHolder模块转移到App子组件时，此模块iteams error或undefined 。 因此，我知道问题出在组件队列渲染中。 但是我们如何解决该错误呢？

/ *主要应用程序组件* /

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保持器模块* /

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;

/带有嵌套课程模块的儿童组件/

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

由于iteamsHolder返回默认值'Sorry' ，而不是对象{ iteamsMain, iteamsSupport }您变得undefined 。 如果更改为：

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

您会看到'Sorry'正在传递给组件。 这是因为在评估iteamsHolder时，该网页尚未完全加载。 不知道为什么要以这种方式来构造代码，就如何“修复”它提出了一个很好的建议。 可能有帮助的是查看document.readyState工作方式，并通读此处列出的建议 。