React 如何根据 if else 条件返回标签消息

Question

这里是一个初学者，但我正在努力让以下内容发挥作用。我这里有一个 if else 条件，我希望标签消息依赖，但我收到一条错误消息 Cannot find name 'message' 我做错了什么？if else 条件如下：

if(devEnv()) {
    const message = useMessageAsString(
      <FormattedMessage
        id="xxxxxx"
        defaultMessage="I've read and accept the <aTerms>Terms of Use</aTerms> and <aPrivacy>Privacy Policy</aPrivacy>"
        values={{
          aTerms: (msg: string) => (
            <a
              rel="noreferrer noopener"
              target="_blank"
              href={URL_TERMS_AND_CONDITIONS_DEV}
            >
              {msg}
            </a>
          ),
          aPrivacy: (msg: string) => (
            <a
              rel="noreferrer noopener"
              target="_blank"
              href={URL_PRIVACY_POLICY}
            >
              {msg}
            </a>
          ),
        }}
      />
    )
  } else {
    const message = useMessageAsString(
      <FormattedMessage
        id="xxxxx"
        defaultMessage="I've read and accept the <aTerms>Terms of Use</aTerms> and <aPrivacy>Privacy Policy</aPrivacy>"
        values={{
          aTerms: (msg: string) => (
            <a
              rel="noreferrer noopener"
              target="_blank"
              href={URL_TERMS_AND_CONDITIONS}
            >
              {msg}
            </a>
          ),
          aPrivacy: (msg: string) => (
            <a
              rel="noreferrer noopener"
              target="_blank"
              href={URL_PRIVACY_POLICY}
            >
              {msg}
            </a>
          ),
        }}
      />
    )
  }

然后在返回中我想这样做：

<CheckBox
                  data-testid={'terms_and_privacy_policy'}
                  checked={formValues.accepted_terms_and_privacy_policy}
                  onChange={() => {
                    if (!isValid) {
                      triggerValidation()
                    }
                    onFormFieldChange(
                      'accepted_terms_and_privacy_policy',
                      !formValues.accepted_terms_and_privacy_policy
                    )
                  }}
                  label={message}
                />

Answer 1

问题在于该变量message仅在有限的范围内声明。如果此代码全部存在于其中，render()则在将条件检查为可变var（或let）之前尝试定义消息，如下所示：

var message = "";
if (devEnv()) {
  message = useMessageAsString(
  ...
} else {
  message = useMessageAsString(
  ...
}

return (
 ...
 label={message}
)

或者，您可以坚持const使用三元运算符进行赋值：

const message = devEnv() ? versionA : versionB;

如果出于某种原因，您正在使用基于类的组件，并且消息是在另一个函数中定义的，那么render您需要将其声明为类上的字段。