为什么这对三元返回工作没有反应？

Question

当名为“ columnsItem”的道具大于50时，我有一个滑板需要显示“警告”组件（现在仅是“ test” 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>
                                  `,
        }}
      />
    );
  }
}

Answer 1

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

<slideboard-smart></slideboard-smart>

请注意，该组件没有大写。 它应该像这样使用：

<SlideboardSmart />

虽然，这是该帖子的重复帖子，但在这种情况下，我没有将其标记为重复，但这与可能使某人感到困惑的虚线样式有所不同。

在附件中，有人可以使用{slide()}类的钩子，但是在这里我们不能使用{slideboard-smart()} -语法错误。

---

现在，对您的查询：为什么显示空白？

这是因为，当您使用小写组件（由用户定义）时，它将返回null 。 它只是变成了：

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

忽略slideboard-smart可能拥有的一切。

---

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

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

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

Answer 2

好吧，我只是通过导出组件找到了一个解决方案。 问题出在angular.bootstrap的$ destroy上，除非出于某种原因将整个类从dom中删除，否则该函数不会起作用。

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

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

Answer 3

return columnsItem > 50 ? '<div>test</div>' : '';

对于JSX

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