使用三元表达式渲染组件

Question

我去使用三元表达式渲染一个组件。

目前我正在做这样的事情

 <View style={container}>
          { this.state.loaded ? 
                            (<VictoryChart
                    theme={VictoryTheme.material}
                    >
                    <VictoryArea
                        style={{ data: { fill: "#c43a31" } }}
                        data={this.coinHistoryData} 
                        x="cHT"
                        y="cHTVU"
                        domain={{ y: [0, 30000] }}
                    />
                    </VictoryChart>)
          : (<Text> Loading..</Text>)}  </View>

但这不起作用并抛出错误说Invariant Violation

ExceptionsManager.js:84 未处理的 JS 异常：不变违规： 不变违规：文本字符串必须在 组件。

[问题：]如何修复它并在三元表达式中渲染整个组件

Ps：据此stackoverflow question：当我们进行内联条件渲染时会发生这种情况。

Answer 1

我以前在 react-native 看到过。
我知道有两个原因会引发此错误：

1. 返回null / undefined（我认为不是你的情况）
2. </Text> 标签后的空格（我认为这是你的情况）

所以去掉最后的空格：

<View style={container}>
          { this.state.loaded ? 
                            (<VictoryChart
                    theme={VictoryTheme.material}
                    >
                    <VictoryArea
                        style={{ data: { fill: "#c43a31" } }}
                        data={this.coinHistoryData} 
                        x="cHT"
                        y="cHTVU"
                        domain={{ y: [0, 30000] }}
                    />
                    </VictoryChart>)
          : (<Text> Loading..</Text>)}  </View> //<--- spaces are here

所以这一行

: (<Text> Loading..</Text>)}  </View> 

应该是这样的

: (<Text> Loading..</Text>)}</View>