当子组件加载时，在父组件中加载React侧边栏

Question

在React中，我试图在加载特定的子组件时在父组件中加载侧边栏组件。我遇到的第一个问题是，我不断收到未定义length()的TypeError。其次，加载idx <- length(df) df[,c(1:3, (idx - 2):idx)] 时无法加载this。我也想更新<Sidebar/>中的标题，但是直到我能够显示侧边栏为止，我什至无法做到这一点。

下面是我汇总的3个类的JSFiddle来演示此问题。

https://jsfiddle.net/pegues/9d31pah7/

下面是主要类的组件代码：

<NewPage/>

下面是NewPage类组件：

main

Answer 1

在类属性中使用箭头函数可避免绑定this.handleCardClick = this.handleCardClick.bind(this)。

在您的情况下，您忘记绑定loadNewPage等。

class Main extends Component {
  state = {
    pageTitle: "",
    mounted: false,
    data: [],
    sidebar: false
  };

  titleHandler = () => { ... }

  sidebarHandler = () => { ... }

  loadDashboard = () => { ... }

  loadNewPage = ()  => { ... }
...
}

此外，您没有在state中引用sidebarHandler：

sidebarHandler = () => {
    console.log('Sidebar Function Called');
    this.setState({ sidebar: !this.state.sidebar }); // Not state.sidebar
}

您的代码中还有更多错误，例如不使用传递给props.action的{​​{1}}等。

将当前的沙箱与已切换的NewPage，Dashboard和NewPage一起使用来查看代码。