Question

当名为“ columnsItem”的道具大于50时，我有一个滑板需要显示“警告”组件（现在仅是“ test” div）。它运作良好，但当我尝试回到栏数较少的滑板时，出现白屏。你知道我做错了吗？非常感谢！ SlideboardWrapper类扩展了React.Component { 静态propTypes = { columnItem：PropTypes.number.isRequired， }; componentDidMount（）{ angular.bootstrap（this.container，['slideboardIntegration']）; } componentWillUnmount（）{ angular.element（'slideboard-smart'）。trigger（'$ destroy'）; } render（）{ const {columnsItem} = this.props; 如果（columnsItem <5 && columnsItem！== 0）返回

测试

; 返回（

{ this.container = c; }} 危险地设置内部HTML = {{ __html：` `， }} /> ）; } }

3 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

答案 2 :(得分：-1)

Answer 1

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

<slideboard-smart></slideboard-smart>

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

<SlideboardSmart />

尽管这是this post的重复帖子，但在这种情况下我并未将其标记为重复，但它与那种可能使人感到困惑的虚线样式有所不同。

在附件中，有人可以使用{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>
                                  `,
        }}
      />
    );

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

3 个答案: