javascript - 我可以在反应“渲染”语句中分配变量吗

Question

我在几行上有多列数据。对于每个数据元素，我都有一个反应元素。第一行可能有 4 到 6 个元素。
例如，我显示用户的姓名、生日和电子邮件。如果用户输入了可选信息，我也会显示。
所以对于另一个用户，我可能会显示姓名、生日、电子邮件、电话号码和状态。
为了不弄乱布局，我需要计算数据的开始列和结束列，以便第一个元素（名称）填充布局。

我可以在 return 语句中进行内联计算，但出于抽象目的，我希望有一个函数返回 start 和 end 列。我想将它保存在每一行的变量中。像这样：
{({ start, end } = getStartEnd(2, this.props))} <ColumnSpan row={1} start={start} end={end}>

这给出了错误Objects are not valid as a React child (found: object with keys {start, end}). If you meant to render a collection of children, use an array instead.

如果我使用数组[start, end] = ...，则反应会以某种方式将数字全部覆盖（好像语句已执行并且变量呈现而不是为下一个语句保留）。

标签： javascriptreactjs

Answer 1

这对 JSX 没有意义。你可以像这样传播道具

<ColumnSpan row={1} {...getStartEnd(2, this.props)} />

你可以在这里阅读更多关于将 props 传播到 JSX中的内容。