Javascript 为什么'；这不是我的工作吗？

我有一个幻灯片，当一个名为“columnsItem”的道具大于50时，它需要显示一个“警告”组件（目前只是一个“测试”div）

它工作得很好，但当我试图回到一个列数较少的幻灯片时，我会看到一个白色的屏幕。你知道我做错了什么吗？ 非常感谢

class SlideboardWrapper extends React.Component {
  static propTypes = {
    columnsItem: PropTypes.number.isRequired,
  };

  componentDidMount() {
    angular.bootstrap(this.container, ['slideboardIntegration']);
  }

  componentWillUnmount() {
    angular.element('slideboard-smart').trigger('$destroy');
  }

  render() {
    const { columnsItem } = this.props;

    if (columnsItem < 5 && columnsItem !== 0) return <div> test </div>;

    return (
      <div
        style={{ height: '100%' }}
        ref={(c) => {
          this.container = c;
        }}
        dangerouslySetInnerHTML={{
          __html: `
                                  <slideboard-smart></slideboard-smart>
                                  `,
        }}
      />
    );
  }
}

类SlideboardWrapper扩展React.Component{
静态类型={
columnsItem:PropTypes.number.isRequired，
};
componentDidMount（）{
引导（this.container，['slideboardIntegration']）；
}
组件将卸载（）{
角度.element（'slideboard-smart'）。触发器（'$destroy'）；
}
render（）{
const{columnsItem}=this.props；
if（columnsItem<5&&columnsItem！==0）返回测试；
返回(
{
这个容器=c；
}}
危险性西汀={{
__html:`
`,
}}
/>
);
}
}

返回columnsItem>50？“测试'：''；

对于JSX

return (
 { columnsItem > 50 
    ? '<div>test</div>' 
    : '' 
 }
      <div
        style={{ height: '100%' }}
        ref={(c) => {
          this.container = c;
        }}
        dangerouslySetInnerHTML={{
          __html: `
                                  <slideboard-smart></slideboard-smart>
                                  `,
        }}
      />
    );

返回(
{columnsItem>50
“测试”
: '' 
}
{
这个容器=c；
}}
危险性西汀={{
__html:`
`,
}}
/>
);

我在您的代码中发现了问题：

<slideboard-smart></slideboard-smart>

忽略

智能滑板

可能具有的所有功能

---

对于您的解决方案，您可以这样使用：

if (columnsItem < 5 && columnsItem !== 0) return <div> test </div>;

return (
  <div
    style={{ height: '100%' }}
    ref={(c) => {
      this.container = c;
    }}
  >
    <SlideboardSmart />
  </div>
);

if（columnsItem<5&&columnsItem！==0）返回测试；
返回(
{
这个容器=c；
}}
>
);

好的，我通过导出组件找到了解决方案。 问题来自angular.bootstrap的$destroy，除非出于某种原因将整个类从dom中删除，否则它将无法工作

  render() {
    const { columnsItem } = this.props;

    return (
      columnsItem < 5 ? <ColumnHandlerComponent /> : <SlideboardComponent />
    );
  }

render（）{
const{columnsItem}=this.props；
返回(
柱状体m<5？：
);
}

我没有看到三元元素，你这是什么意思？为什么要标记angular？@bhojendraurauniyar:

angular.element

？哦，你说得对，我尝试了太多东西，以至于我在脑海中把它混淆了，我尝试了三元元素，如果也不起作用，所以我改为使用if条件。关于角度标签，智能滑板是一个角度标签module@HarshaVenkatram哦，我看不出来。这永远不会返回滑板组件。不，不会，但三元结构的基本原理是正确的。有了正确的JSX知识，您就可以完成这项工作！但是幻灯片会一直呈现。。。我认为OP是显示“测试”或幻灯片，我的理解是幻灯片应该始终呈现。正如OP所说，它工作得很好，但当我试图回到一个列数较少的幻灯片时，我会看到一个白色的屏幕。你知道我做错了什么吗？非常感谢。。。我认为现在情况就是这样。XDI没有编写这个组件，它是angular.module，这可能就是为什么它是这样写的？我不是一个角度专家，所以我不能说，但我不认为这是这里的问题，因为在我尝试实施“测试”之前，它工作得很好。你不能使用它。您必须有大写的组件。照我的回答给你的建议试试看。之后你会看到工作。还有另一个问题，我不明白你的意思-没有得到你的查询条件。我不知道我没有说，我的问题基本上是我需要实现一个“测试”组件，当变量columnsItem小于5时，它会替换“幻灯片”。它可以工作，但是当我想从“测试”组件返回到幻灯片时，我得到一个空组件。基本上是白色的一页。它从“幻灯片”到“测试”都能工作，但不是相反。我不知道我是否清楚？你试过我的建议吗？是的，我试过了，不幸的是，它没有改变问题。

React.createElement("slideboard-smart", null)

if (columnsItem < 5 && columnsItem !== 0) return <div> test </div>;

return (
  <div
    style={{ height: '100%' }}
    ref={(c) => {
      this.container = c;
    }}
  >
    <SlideboardSmart />
  </div>
);

  render() {
    const { columnsItem } = this.props;

    return (
      columnsItem < 5 ? <ColumnHandlerComponent /> : <SlideboardComponent />
    );
  }