反應 如何收集節點並將其作為道具傳遞給孩子

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工作方式，並通讀此處列出的建議 。