如何在 React.js 的 return 方法中编写 JS 代码答案

【问题标题】：How to write JS code inside of the return method in React.js如何在 React.js 的 return 方法中编写 JS 代码
【发布时间】：2021-10-27 01:14:20
【问题描述】：

有一个名为“checkPwd”的变量有 3 个可选值。 “正确”、“空”和“无效” return 方法应基于此变量返回各种 HTML 元素。像这样。

  <FormControl>
    <Stack style={styles.stack}>
      <Input
        type="password"
        placeholder="Confirm Password"
        isInvalid={checkPwd == "correct" ? false : true}
      />
      {
        if (checkPwd == "empty") {
          <FormControl.ErrorMessage>
            Please confirm password.
          </FormControl.ErrorMessage>
        } else if(checkPwd == "invalid") {
          <FormControl.ErrorMessage>
            Password is not strong enough.
          </FormControl.ErrorMessage>
        }
      }
    </Stack>
  </FormControl>

但此代码在编译时出现错误。我希望你的友好合作。

【问题讨论】：

这能回答你的问题吗？ if-else statement inside jsx: ReactJS

标签： javascript reactjs react-native jsx

【解决方案1】：

你可以像这样添加条件：

    {checkPwd == "empty" && (
      <FormControl.ErrorMessage>
        Please confirm password.
      </FormControl.ErrorMessage>
    )}
    {checkPwd == "invalid" && (
      <FormControl.ErrorMessage>
        Password is not strong enough.
      </FormControl.ErrorMessage>
    )}

【讨论】：

reactjs.org/docs/…

【解决方案2】：

你可以将你的逻辑提取到一个函数中，你可以用这种if/else风格写出来。然后在 JSX 中你只需执行{someFunction()} 之类的函数

export default function App() {
  const checkPwd = "empty";

  const someFunction = () => {
    if (checkPwd === "empty") {
      return <div>Please confirm password.</div>;
    } else if (checkPwd === "invalid") {
      return <div>Password is not strong enough.</div>;
    }
    return null;
  };

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {someFunction()}
      </div>
    </>
  );
}

然而，更常见的方法是在 JSX 中内联 ternary operator 以根据条件控制呈现的内容。

export default function App() {
  const checkPwd = "empty";

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {checkPwd === "empty" ? (
          <div>Please confirm password.</div>
        ) : checkPwd === "invalid" ? (
          <div>Password is not strong enough.</div>
        ) : null}
      </div>
    </>
  );
}

最后，如果您只是将验证错误代码映射到字符串值（也许您从服务器收到了一个丑陋的错误代码，但希望向用户显示更易读的内容），我将把这种方法留给您考虑一下。

const errorCodeMap = {
  empty: "Please confirm password",
  weak: "Password is not strong enough",
  short: "Password is not long enough",
  unmatched: "Both password values must match",
  missingNumber: "Password must incliude a number"
};

export default function App() {
  const errorCode = "short";

  return (
    <>
      <div>
        <input type="password" placeholder="Confirm Password" />
        {!!errorCode && <div>{errorCodeMap[errorCode]}</div>}
      </div>
    </>
  );
}

【讨论】：

【解决方案3】：

这是因为jsx 不支持if else 语句，您可以使用ternary 运算符

{checkPwd == "empty" ? (
   <FormControl.ErrorMessage>
      Please confirm password.
   </FormControl.ErrorMessage>
) : checkPwd == "invalid" ? (
   <FormControl.ErrorMessage>
      Password is not strong enough.
   </FormControl.ErrorMessage>
) : null}

【讨论】：