在 React 渲染方法中使用 for 在 return 语句中失败

Posted 2023-02-22

【中文标题】在 React 渲染方法中使用 for 在 return 语句中失败

【英文标题】：use of for failing inside return statement inside React render method

【发布时间】：2016-10-14 04:15:25

【问题描述】：

以下代码失败，错误为Unexpected token 指向for：

import React from 'react';
import ReactDOM from 'react-dom';

export default React.createClass(
  render() 
    let nodes = JSON.parse(this.props.nodes)
    console.log(Object.keys(nodes));

    return (
      <ol>
        
          for (var k in nodes)
              let val = nodes[k];
              let children = val.children;
              let content = val.content;
              <li key=k id=k content=content />
              // <TChildPane key=k count=children.length />
          
        
      </ol>
    );
  
);

this.props.nodes是从父组件传递过来的，是一个对象/哈希 这是包含“孩子”和“内容”键的对象的集合。 'children' 键的值是一个数组。 'content' 键的值是字符串或 bool 或 int 等...

如果您看到与 JSX 相关的错误，请告诉我！？？

谢谢。

【问题讨论】：

我认为您还应该在nodes 中添加整个有效负载。它会帮助别人给你正确的建议。

【参考方案1】：

找到关于在 jsx 中可以做什么和不可以做什么的文档并不像应该的那么容易，但是像这样使用 for 是你不能做的事情之一。如果您想在原地执行更复杂的代码，请将其移动到一个函数中并在那里调用该函数：

export default React.createClass(
  renderList(nodes) 
    const list = [];
    for (const k in nodes)
      let val = nodes[k];
      let children = val.children;
      let content = val.content;
      list.push(<li key=k id=k content=content />);
    

    return list;
  
  render() 
    let nodes = JSON.parse(this.props.nodes)
    return (
      <ol>
         this.renderList(nodes) 
      </ol>
    );
   
);

【讨论】：

谢谢！发布问题后，我确实遇到了“React JSX 内部循环”问题。但是您添加的只是将逻辑移出 - 只要调用的方法返回 DOM 或 React 元素 - 就更干净了，我将使用它。再次感谢。接受你的回答。

【参考方案2】：

或者你可以这样做

nodes.map(function(object, i)
    return <li key=object id=object content=object.content />;
)

【参考方案3】：

你可以尝试 Array.map() 在 React 中循环

import React from 'react';
import ReactDOM from 'react-dom';

export default React.createClass(
  render() 
    let nodes = JSON.parse(this.props.nodes)
    return (
      <ol>
        
          nodes && nodes.map((item,index)=>
            return(
              <li key=index id=index content=item.content />
            )
          )
        
      </ol>
    );
  
);