减少表中类/函数被调用的次数

Question

我的网站上有一张桌子。然后，我的<td>中将使用一种样式。但是，我不想在代码中多次键入样式。

这是我声明的功能。

const tdStyle = {
  paddingLeft: "35px",
  paddingRight: "35px",
  paddingBottom: "10px",
  paddingTop: "10px"
};

这是我页面上的代码。

<tr>
<td style={tdStyle}>NA</td>
<td style={tdStyle}>NA</td>
<td style={tdStyle}>NA</td>
<td style={tdStyle}>NA</td>
<td style={tdStyle}>NA</td>
</tr>

有什么方法可以不必多次键入style = {tdStyle}？

Answer 1

制作一个具有其样式的组件，然后按如下所示使用它。

const CustomTableCell = function(props) {
   return <td style={tdStyle}>{props.children}</td>;
}

<tr>
   <CustomTableCell>NA</CustomTableCell>
   <CustomTableCell>NA</CustomTableCell>
   <CustomTableCell>NA</CustomTableCell>
   <CustomTableCell>NA</CustomTableCell>
   <CustomTableCell>NA</CustomTableCell>
</tr>

现在您可以在一个地方进行更改，并且样式随处可见。