Reactjs JSX映射中的React-console.log

我有一个组件

Tbody

，如下所示（很抱歉代码太长）-我想在控制台（第23行）中打印

val

的值-注意val在

映射中。但是，获取错误-
解析错误：意外标记，应为“，”

从“React”导入React；
从“样式化组件”导入样式化；
const Td=styled.Td`
${（道具）=>
rowSpan道具&&
`   &&&&& {
文本对齐：左对齐；
垂直对齐：顶部；
}
`}
`;
const ListItem=styled.div`
空白：nowrap；
`;
常量Tbody=（{data}）=>(
{data.map（（行，i）=>(
{row.map（（val，j）=>(
console.log（val）/-给出错误
{Array.isArray（val.text）
？val.text.map（（行，行索引）=>(
{typeof line===“对象”
？对象条目（行）
.map（（[key，value]）=>`${key}:${value}`）
.join（“，”）
：行}
))
：val.text}
))}
))}
);
导出默认Tbody；

错误：

映射后的
（
表示：返回的所有内容都是
JSX

使用大括号

{row.map((val,j) => {
  console.log(val);
  return (
    ... JSX
  )
}}

如果您想在JSX内部登录，可以创建一个虚拟组件
您希望记录哪些插头：


const Console=props=>(
控制台[对象.键（道具）[0]（…对象.值（道具））
，null//➜ React组件必须返回某些内容
)
//一些内部带有JSX和记录器的组件
常量应用=（）=>
这是一些组件/元素

另一个组成部分/要素

ReactDOM.render(
,
document.getElementById（“根”）
)
在JSX内部只需编写{console.log（val）}
例如：

array.map（item=>{console.log（item}）

这将起作用
此外，将其中一些移动到子组件中可能更容易。
{row.map((val,j) => {
  console.log(val);
  return (
    ... JSX
  )
}}

array.map(item => <>{console.log(item}</>)