使用了return語句裏面沒有內部陣營渲染方法

下面的代碼用的「意外令牌」錯誤而失敗在「爲」指點：使用了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> 
    ); 
    } 
});

this.props.nodes從父組件傳遞並且是對象/散列，它是包含「兒童」和「內容」鍵的對象的集合。 '兒童'鍵的值是一個數組。 '內容'鍵的值是一個字符串或布爾或int等...

請讓我知道，如果你看到一個JSX相關的錯誤！

感謝。

來源

2016-06-13 user3213604

這不像找到關於jsx內部可以做什麼和不能做什麼的文檔那麼簡單，但是像這樣使用是你不能做的事情之一。如果你想在地方執行更復雜的代碼，將其移動到一個函數，調用函數有代替：

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

來源

2016-06-13 16:57:09 kinakuta

謝謝！發佈問題後，我確實遇到了React JSX'內部循環。但是，只要被調用的方法返回DOM或React元素，只需將邏輯移出即可 - 更加簡潔，我將使用它。再次感謝。接受你的答案。 – user3213604

或者你可以做這樣的事情

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

來源

2016-06-13 17:01:40 KRONWALLED

使用了return語句裏面沒有內部陣營渲染方法

回答

相關問題