如何在Chakra UI <Text>元素中为密码验证提示添加换行？

你遇到的问题是因为React默认会把字符串里的\n当成普通文本，<br>标签会被转义成文本显示，所以直接加这两个都不会生效。下面给你几种可行的实现方式：

方法一：用数组存储提示内容，渲染时循环生成换行元素 #

这种方式最符合React和Chakra的组件化思路，也最灵活。

首先修改你的验证hook，把提示内容拆成数组：

const passwordValidation = () => {
  const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
  if (!regex.test(formState.password) || formState.password === "") {
    setPasswordMessage([
      "*This is a required field. Please meet the following password requirements:",
      "A minimum of 8 characters.",
      "At least one uppercase letter.",
      "At least one lower case letter.",
      "At least one numerical character.",
      "At least one special character."
    ]);
  } else {
    setPasswordMessage([]);
  }
};

然后在渲染提示时，用Chakra的Stack组件来实现换行（每个提示占一行）：

<FormControl data-test="password-input" id="password">
  <FormLabel>Password: </FormLabel>
  <Input
    placeholder="******"
    name="password"
    type="password"
    value={formState.password}
    onChange={handleChange}
    required
  />
  <Stack spacing={1} color="#FF0000" fontSize="md">
    {passwordMessage.map((line, index) => (
      <Text key={index}>{line}</Text>
    ))}
  </Stack>
</FormControl>

如果不想用Stack，也可以用map配合<br>标签：

<Text color="#FF0000" fontSize="md">
  {passwordMessage.map((line, index) => (
    <React.Fragment key={index}>
      {line}
      {index !== passwordMessage.length - 1 && <br />}
    </React.Fragment>
  ))}
</Text>

方法二：利用CSS样式让\n生效 #

如果不想改数组，直接在字符串里用\n分隔，然后给Text组件加样式让换行生效：

修改hook里的提示字符串：

const passwordValidation = () => {
  const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
  if (!regex.test(formState.password) || formState.password === "") {
    setPasswordMessage(
      "*This is a required field. Please meet the following password requirements:\nA minimum of 8 characters.\nAt least one uppercase letter.\nAt least one lower case letter.\nAt least one numerical character.\nAt least one special character."
    );
  } else {
    setPasswordMessage("");
  }
};

渲染时给Text组件添加whiteSpace="pre-wrap"样式：

<Text color="#FF0000" fontSize="md" whiteSpace="pre-wrap">
  {passwordMessage}
</Text>

方法三：使用dangerouslySetInnerHTML（不推荐） #

这种方式可以直接解析字符串里的<br>标签，但因为存在XSS风险（如果提示内容包含用户输入的话），所以只推荐在提示内容完全固定的场景下使用：

修改hook里的提示字符串：

const passwordValidation = () => {
  const regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
  if (!regex.test(formState.password) || formState.password === "") {
    setPasswordMessage(
      "*This is a required field. Please meet the following password requirements:<br>A minimum of 8 characters.<br>At least one uppercase letter.<br>At least one lower case letter.<br>At least one numerical character.<br>At least one special character."
    );
  } else {
    setPasswordMessage("");
  }
};

渲染时使用dangerouslySetInnerHTML：

<Text color="#FF0000" fontSize="md" dangerouslySetInnerHTML={{ __html: passwordMessage }} />

内容的提问来源于stack exchange，提问作者Dan Gray