javascript - 我可以在react 'render'语句中分配变量吗

标签 javascript reactjs

我的多行中有多列数据。对于每个数据元素,我都有一个 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/

相关文章:

javascript - 使用 Javascript 添加行错误

reactjs - 如何测试包含在 withRouter 中的 React 组件的回调?

reactjs - 如何在 Material-UI (React) 中设置卡片高度的动画

javascript - Firebase 时间戳返回错误日期 - Javascript

reactjs - 在 react 应用程序中渲染 svg 图像时延迟

javascript - 输入文本值以逗号分隔

javascript - 在javascript中创建不可变对象(immutable对象)

javascript - 在 ASP.NET 项目中调试 javascript

javascript - Array.map 未在 React Native 中呈现

javascript - 使用移动元素的 javascript 处理网页滚动的问题