javascript - 使用三元表达式渲染组件

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 Unhandled JS Exception: Invariant Violation: Invariant Violation: Text strings must be rendered within a component.

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

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>