我的多行中有多列数据。对于每个数据元素,我都有一个 react 元素。第一行可以有 4 到 6 个元素。
例如,我显示用户的姓名、生日和电子邮件。如果用户输入了可选信息,我也会显示该信息。
因此,对于另一个用户,我可能会显示姓名、生日、电子邮件、电话号码和状态。
为了不弄乱布局,我需要计算数据的开始列和结束列,以便第一个元素(名称)填充布局。
我可以在 return 语句内进行内联计算,但出于抽象目的,我希望有一个函数返回开始列和结束列。我想将它保存在每一行的变量中。像这样:
{({ 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] = ...
React 以某种方式将数字全部覆盖(就好像语句被执行并且变量被渲染而不是为下一条语句保留)。
最佳答案
这不是有意义的 JSX。你可以像这样传播 Prop
<ColumnSpan row={1} {...getStartEnd(2, this.props)} />
您可以阅读有关将 props 传播到 JSX 的更多信息 here .
关于javascript - 我可以在react 'render'语句中分配变量吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50688492/