Question

我是ReactJS的新手并经历了一些例子：flux-todo-mvc。由于react将组件保留在树结构中并更新状态更改。

如何在没有页面刷新的情况下在树的特定节点添加新的子组件（未捆绑）？

更多说明

假设组件X可以有三种类型的子项：A，B和C。首先，GET请求始终为A，因此X -> A会呈现B，为了加快速度，我们不会包含C和X = React.createClass({ render: function() { return ( <A /> ); } }); React.render( <X />, document.getElementById('_x') );。例如：

在此之后，如果状态发生某些变化，我们可以使用AJAX请求将B的孩子更改为C或{{1}}

Answer 1

您可以在渲染函数中编写条件逻辑，将变量设置为null或组件实例。并在返回的渲染JSX中注入。

如：

render: function() {
  var subComponent = null;
  if (this.state.showSub) {
    subComponent = <Child />;
  }
  return (
    <div>{subComponent}</div>
  );
}

实现状态变化的唯一方法。如果没有实际刷新，则无法实时更新渲染代码。

Answer 2

你可以这样做：

render: function() {
  var child = function(){
      if(this.state.ajax_result ==1) {return <B/>
      else if(this.state.ajax_result ==2) {return <C/>}
      else {return <A/>}
  }


return ( {child} );
}

现在在渲染之外，听你的ajax调用。每次状态改变时，你的组件都会重新渲染

如何在reactjs中捆绑新组件

2 个答案: