在 React 渲染方法中使用 for failing inside return 语句

Question

以下代码失败，错误 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是父组件传过来的，是一个object/hash 这是包含 'children' 和 'content' 键的对象集合。 'children' 键的值是一个数组。 'content' key 的值是字符串或 bool 或 int 等...

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

谢谢。

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

Answer 2

或者你可以这样做

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

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

在 React 渲染方法中使用 for failing inside return 语句

use of for failing inside return statement inside React render method

javascript

json

jsx

reactjs