使用三元表达式渲染组件

Question

我去使用Ternary表达式渲染组件.

目前我正在做这样的事情

 <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异常:不变违例:不变违规:文本字符串必须在组件中呈现.

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

Ps:根据这个stackoverflow问题:当我们进行内联条件渲染时会发生这种情况.

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>