Javascript 在React render方法内使用for failed inside return语句

以下代码失败，错误为

指向
的意外标记
：

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>
    );
  }
});

从“React”导入React；
从“react dom”导入react dom；
导出默认的React.createClass({
render（）{
let nodes=JSON.parse（this.props.nodes）
log（Object.key（节点））；
返回(
{
for（节点中的变量k）{
设val=nodes[k]；
让children=val.children；
设content=val.content；

// 
}
}
);
}
});

this.props.nodes
从父组件传递，是一个对象/散列
它是包含“子项”和“内容”键的对象集合子项的键的值是一个数组“内容”键的值是字符串、布尔值或整数等

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

谢谢。
要找到关于在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>
    );
  } 
});

export default React.createClass({
渲染列表（节点）{
常量列表=[]；
for（节点中的常数k）{
设val=nodes[k]；
让children=val.children；
设content=val.content；
push（
）；
}
退货清单；
}
render（）{
let nodes=JSON.parse（this.props.nodes）
返回(
{this.renderList（节点）}
);
} 
});
或者您可以这样做

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

{nodes.map（函数（对象，i）{
返回
；
})}
您可以尝试使用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>
    );
  }
});

从“React”导入React；
从“react dom”导入react dom；
导出默认的React.createClass({
render（）{
let nodes=JSON.parse（this.props.nodes）
返回(
{
nodes&&nodes.map（（项目，索引）=>{
返回(

)
})
}
);
}
});
谢谢！在发布问题后，我确实遇到了“内部循环反应JSX”问题。但是，只要调用的方法返回DOM或React元素，那么只需将逻辑移出就可以了，这样做更为简洁，我将使用它。再次感谢你。接受您的答案。我认为您还应该在
节点中添加整个负载。它会帮助别人给你正确的建议。