Question

我希望在Step标记内部有一个switch case语句，以获得基于步骤编号的正确格式消息，但它总是在那里提示错误。

错误说：

[ts]预期表达

export const MainBoxHeader = props => (
  <Row style={{ marginBottom: 12 }} gutter={100}>
    <Col span={8}>
      <BackButton
        style={{ visibility: props.backButtonIsHidden ? 'hidden' : 'visible' }}
        onClick={props.onClickBack}
      >
        <FormattedMessage id="back" />
      </BackButton>
    </Col>
    <Col span={8}>
      <Step>
        <FormattedMessage id={`SE-196.PopUp${(props.step)}.Step`} />
      </Step>
    </Col>
    <Col span={8}>
      <ColorBtn color="purple" onClick={props.onClickNext}>
        <FormattedMessage id="continue" />
      </ColorBtn>
    </Col>
  </Row>
);

Answer 1

尝试以下语法

<Step>
    {(() => {
        switch(...) {}
    })()}
</Step>

在这里你需要返回值。

或

您可以使用

renderSwitch(param) { switch(param) { case 'foo': return 'bar'; default: return 'foo'; } } render() { return ( <Step> {this.renderSwitch(param)} </Step> ); }

在这里，您可以使用一个函数，您可以在其中编写switch case并在render语句中使用它

Answer 2

Sangram的灵魂会起作用，但你可以使用模板文字并完全取消开关。或者将开关提取到一个功能中并在功能组件中引用它 - 两种解决方案都可以，恕我直言，更清洁。

例如：

libjpeg

或

export const MainBoxHeader = props => (
  // ...
  <Step>
    <FormattedMessage id={`PopUp${props.step}.Step`} />
  </Step>
  // ...
)

或者可以考虑一下这个逻辑是否更适合步骤组件本身，在这里您可以通过步骤const getFormattedMessage = step => ( switch (step) { case 1: return <FormattedMessage ... /> } ) export const MainBoxHeader = props => ( // ... <Step> {getFormattedMessage(props.step)} </Step> // ... )这样的道具来处理<Step stepId={props.step} />本身内部的渲染逻辑。当然，您可能有正当理由不这样做，而是可以使用上述任何解决方案。

希望我帮助过。

Answer 3

将逻辑置于返回JSX之外并将结果存储到局部变量中，然后将其嵌入返回的JSX中。

var stepNode = null; // some sensible default in case of unexpected input; depends on what you want to happen in your situation.

if (props.step == 1) {
    stepNode = <Something ...>
} else if (props.step == 2) {
    stepNode = <Something-Else ....>
}
return (<TheJSX>
            ....
                <Div> { stepNode } </Div>
            .....
       </TheJSX>);

修改

关于默认值，您必须考虑如果输入与您预期的不匹配会发生什么，例如：说props.step设置为4。

我相信React只会忽略null值，但我可能会弄错。根据您的具体情况，您可能希望记录错误或显示完全不同的内容。

在标签内写入逻辑代码

3 个答案: