React基於道具使用不同的導入組件

Question

我知道這不是執行此操作的最佳方法，但仍然要解決以下問題：

編譯失敗，如果出現意外令牌

<Col>
{
  if (language === 'en')
  {
    Api.getFaqText().map(b => {
      if (b.id === 1)
        return <BHead textClass={b.classname} key={b.id} title={(<div dangerouslySetInnerHTML={{__html: b.title}} />)} />
    })
  }
}
</Col>

問題是如何確定在某種情況下要使用哪些導入的模塊功能。 Api.getFaqText import Api from 'path/'的import Api from 'path/' ，然后會有import Api from 'path/'的import Y from 'path/'它也有一個名為getFaqText的函數。

如果有條件怎么修改這部分，以免渲染中斷？

下面要點中提供的示例不起作用，因為在if得到了意外的標記。

要點： https : //gist.github.com/zilahir/0a7e4af0d00a067c5667110a035b5e4b

Answer 1

1）使用Condition && <Component />構造實現條件

2）在您的map函數中，返回null而不是什么。 否則，您可以在地圖之前進行用戶過濾。

  render() {
    return <Col>
      {language === 'en' && Api.getFaqText().map(b => {
          if (b.id === 1) {
             return <BHead textClass={b.classname} key={b.id} title={(<div dangerouslySetInnerHTML={{__html: b.title}} />)} />;
          } else {
            return null;
          }
        })
      }
    </Col>
  }