在React render方法中使用for return in return语句

时间:2016-06-13 16:34:58

标签: javascript json reactjs react-jsx jsx

以下代码失败,错误为“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”键的对象集合。 'children'键的值是一个数组。 'content'键的值是字符串或bool或int等...

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

感谢。

3 个答案:

答案 0 :(得分:2)

在jsx中查找关于你能做什么和不能做什么的文档并不是那么容易,但是像这样使用是你不能做的事情之一。如果您想要执行更复杂的代码,请将其移动到函数中并调用该函数:

StringEnumConverter

答案 1 :(得分:0)

或者你可以做这样的事情

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

答案 2 :(得分:0)

您可以尝试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>
    );
  }
});