在标签内编写逻辑代码[重复]

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

把逻辑放到返回的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 值，但我可能弄错了。根据您的情况，您可能希望记录错误或显示完全不同的内容。

Answer 2

试试下面的语法

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

这里需要返回值。

或

你可以使用

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <Step>
      {this.renderSwitch(param)}
     </Step> 
  );
}

在这里你可以使用一个函数，你可以在其中编写 switch case 并在你的渲染语句中使用它

Answer 3

Sangram 的灵魂可以工作，但您可以使用模板文字并完全取消开关。或者将开关提取到一个函数中并在您的函数组件中引用它 - 恕我直言，这两种解决方案都会更干净。

例如：

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 组件本身，您可以在其中向 Step 传递一个诸如 <Step stepId={props.step} /> 之类的道具，并在 Step 本身内部处理渲染逻辑。当然，您可能有充分的理由不这样做，并且可以改用上述任何解决方案。

希望我能帮上忙。