断线 JSX 反应答案

【问题标题】：Breaking line JSX react断线 JSX 反应
【发布时间】：2021-12-25 10:04:26
【问题描述】：

当属性消息在不同组件的<p> 内呈现时，我应该怎么做才能换行？我无法理解这一点...我尝试使用<br> 或\n，但它一直呈现在一行中...

const modalOn = (date, clinic) => {
  setError({
    title: "Do you want to remove the following shift?",
    message: "DATE: " + date + " CLINIC: " + clinic,
  });
};

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

您可以尝试在您的消息中插入\n，然后当您必须渲染它时，您可以输入类似

{message.split("\n").map((item, index) => {
return index === 0 ? item : [<br key={index} />, item];
})}

我不知道这样做是否正确，但它对我有用

【讨论】：

【解决方案2】：

你需要使用前置标签：

    const ReportMap = () => {
    useEffect(()=>{

    },[])
   const t= {
        title:`Do you want to remove the following shift?`,
            message: "DATE: " + "date" + " CLINIC: " + "clinic",
    }
    return (
        <div>
            <pre>{`${t.title}\n${t.message}`}</pre>
           
        </div>
    );
};

export default ReportMap;

或者给 p 标签留白：

const ReportMap = () => {

   const t= {
        title:`Do you want to remove the following shift?`,
            message: "DATE: " + "date" + " CLINIC: " + "clinic",
    }
    return (
        <div>
            <p style={{whiteSpace: "pre"}}>{`${t.title}\n${t.message}`}</p>
        </div>
    );
};

export default ReportMap;

他们非常适合我。

【讨论】：

【解决方案3】：

谢谢你们......我想我没有提出一个非常明确的问题。我想在问号之后打破，然后在日期之后。

我找到了一个似乎运作良好的解决方案。

  const modalOn = (date, clinic) => {
    setError({
      title: "Do you want to remove the following shift?",
      message: ["DATE: ", fullDate, <br />," CLINIC: ", clinic]
    });
  };

【讨论】：