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中看到过它。
我知道有2个原因会引发此错误：

返回null / undefined（我认为不是您的情况）
</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>

渲染具有三元表达式的组件

1 个答案: