javascript - 使用 React 进行电子邮件签名

Question

我是 React 和 Javascript 新手，我遇到了挑战。

看起来像这样:

电子邮件签名生成器

在特定公司中拥有一致的电子邮件签名非常重要。

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

它应该看起来像这样:

简·多伊//(名字)

前端开发人员//(职位名称)

jdoe@company.com//(电子邮件地址)

公司//(公司信息)

12345城市

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

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

非常感谢任何帮助。

Answer 1

好吧，首先您需要一些数据。

我将有一个包含公司信息和员工数据数组的对象:

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' }
];

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

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')
);

.card {
  margin-top: 0.5em;
  border: 1px solid #333333;
  padding: 0.2em;
}

.name {
  font-weight: bold;
}

.company {
  margin-top: 0.5em;
  color: #000088;
}

<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>