时间戳

首页 > 解决方案 > React：如何显示带有换行符的 JSON 键值对？

javascript - React：如何显示带有换行符的 JSON 键值对？

问题描述

我有以下组件，其中包含一个调用的函数，该函数onClickBtn()包含另一个调用的函数，该函数textBuilder()遍历填充了表单数据的 JSON 对象。单击提交按钮时，我正在使用电子邮件服务以编程方式发送电子邮件。唯一的问题是我的电子邮件Body值最终在电子邮件中看起来像这样：

name: Dean age: 26 email: dean@aol.com styles: Color locations: Right Leg specificLocation: fasdfasdfa description: fdghjdghj budgets: $1000-$1500 days: Wednesday months: June

代替：

name: Dean 

age: 26 

email: dean@aol.com 

styles: Color 

locations: Right Leg 

specificLocation: fasdfasdfa 

description: fdghjdghj 

budgets: $1000-$1500 

days: Wednesday 

months: June

下面是我的组件。有人可以告诉我我做错了什么吗？

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();  

  const onClickBtn = () => {

    const textBuilder = () => {
      var doc = "";
      for (const key in props.values) {
       doc += key + ": " + props.values[key] + "\n";      
      }
      return doc;
    } 

    window.Email.send({
      Host : "smtp.elasticemail.com",
      Username : "dfmmalaw@gmail.com",
      Password : "d2296492-2689-49f7-ae3d-584f1507d23a",
      To : 'dfmmalaw@gmail.com',
      From : "dfmmalaw@gmail.com",
      Subject : "This is the subject",
      Body : textBuilder()
  }).then(
    message => alert(message)
  );
  };

    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit" onClick={onClickBtn}>
          Submit
        </Button>
      </div>
    );
}

标签： javascriptjsonreactjs

解决方案

这是因为您的电子邮件客户端将内容呈现为 HTML。所以换行符只是转换为空格。尝试使用 break 元素，如下所示：

doc += key + ": " + props.values[key] + "<br/>";

推荐阅读