Question

我是React和Javascript的新手，我正在接受挑战。

看起来像这样：

电子邮件签名生成器

在特定公司中签署电子邮件签名非常重要。

应该将应用程序编写为客户端，为员工生成签名。

它应该是这样的：

Jane Doe //（姓名）

Frontend-Developer //（职位名称）

jdoe@company.com //（电子邮件地址）

Company Inc. //（公司信息）

12345城市

每位员工当然都有不同的姓名，电子邮件，职称。

电子邮件地址始终以名字的第一个字母开头，然后是姓氏和@ company.com

非常感谢任何帮助。

Answer 1

嗯，首先你需要一些数据。

我会有一个包含公司信息的对象，以及一系列员工数据：

function Signature({ employee, company }) {
  return (
    <div className="card">
      <div className="employee">
        <div className="name">{employee.firstName} {employee.lastName}</div>
        <div>{employee.jobTitle}</div>
      </div>
      <div className="company">
        <div>{company.name}</div>
        <div>{company.address}</div>
        <div>{company.zipCode}</div>
      </div>      
    </div>
  )
}

然后，您需要一个组件，根据一组员工数据和一些公司信息为每位员工创建一张签名卡。

function Signatures({ employees, company }) {
  return employees.map((employee, key) => {
    return <Signature key={key} employee={employee} company={company} />
  });
}

也许是一种迭代每个签名卡的员工信息的方法：

function Signature({ employee, company }) {
  return (
    <div className="card">
      <div className="employee">
        <div className="name">{employee.firstName} {employee.lastName}</div>
        <div>{employee.jobTitle}</div>
      </div>
      <div className="company">
        <div>{company.name}</div>
        <div>{company.address}</div>
        <div>{company.zipCode}</div>
      </div>      
    </div>
  )
}

function Signatures({ employees, company }) {
  return employees.map((employee, key) => {
    return <Signature key={key} employee={employee} company={company} />
  });
}

const company = {
  companyName: 'Bozos Inc',
  zipCode: 90210,
  address: '1234 Turkey Road.'
}

const employees = [
  { firstName: 'Bob', lastName: 'Smith', jobTitle: 'Engineer' },
  { firstName: 'Karen', lastName: 'Jones', jobTitle: 'Manager' }
];

ReactDOM.render(
  <Signatures company={company} employees={employees} />,
  document.getElementById('container')
);

把它全部放在一起可能会给你这样的东西：

＆＃13;

.card {
  margin-top: 0.5em;
  border: 1px solid #333333;
  padding: 0.2em;
}

.name {
  font-weight: bold;
}

.company {
  margin-top: 0.5em;
  color: #000088;
}

＆＃13;

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

＆＃13;

imagePaste: true,
    imageUploadParam: 'file',
    imageUploadParams: {
        froala: true,
    },
    imageUploadURL: '/update/files',
    imageUploadMethod: 'POST',

＆＃13;

Answer 2

您是否考虑过使用服务器端应用的电子邮件签名作为传输的一部分？我为自己和我的客户使用这个： Exclaimer Cloud for Office 365

和Exclaimer for Exchange Server

电子邮件签名使用react

2 个答案: