在jsx中呈現一個列表的多個返回

有沒有什麼辦法可以重構下面的代碼，使其更加乾淨？特別是在renderTodos方法中的多重回報。我也有一個困惑，我正確創建renderTodos方法？我應該把它放在渲染功能？或做this.renderTodos()還行嗎？在jsx中呈現一個列表的多個返回

export default class TodoList extends Component { 

    renderTodos =() => { 
     const { todos } = this.props 

     return todos.map(todo => { 
      return (
       <Todo key={todo.id} {...todo} /> 
      ) 
     }) 
    } 

    render() { 
     return(
      <div> 
       {this.renderTodos()} 
      </div> 
     ) 
    } 
}

來源

2017-07-16 Madeline Ries

既然你只是想沒有任何條件或計算返回元素，這樣就可以避免{}和return地圖。

像這樣：

renderTodos =() => { 
    const { todos } = this.props; 

    return todos.map(todo => <Todo key={todo.id} {...todo} />) 
}

有了這樣的內部renderTodos回報，需要從該方法返回的結果。

另一種方式是把地圖部分直接在渲染方法，像這樣：

render() { 
    return(
     <div> 
      { 
       this.props.todos.map(todo => <Todo key={todo.id} {...todo} />) 
      } 
     </div> 
    ) 
}

或者最好將其寫爲Stateless Functional Component：

const TodoList = (props) => (
    <div> 
     { 
      props.todos.map(todo => <Todo key={todo.id} {...todo} />) 
     } 
    </div> 
)

檢查這篇文章：Presentational and Container Components

來源

2017-07-16 05:22:41

如何知道何時使用無狀態組件？我發現在某些時候statless沒有意義，因爲我需要循環方法。比如在todoList組件中，你需要做無限滾動，你需要用戶滾動事件的生命週期方法。 –

如果任何組件不必維護它自己的狀態，則不需要生命週期方法，那麼在這種情況下，最好使用無狀態功能組件，無狀態樂趣。 COM。主要負責UI，看起來如何，沒有太多的功能部分，檢查這個好的文章：[Presentational and Container Components]（https://medium.com/@dan_abramov/smart-and-dumb-components -7ca2f9a7c7d0） –

如果您不使用renderTodos作爲回調作爲prop傳遞，則可以直接在第e最終render()。

render() { 
    return(
     <div> 
      {props.todos.map(todo => <Todo key={todo.id} {...todo} />} 
     </div> 
    ) 
}

我也在這裏使用隱式返回。

而且，由於你的組件不會保持任何state，只是接受props並呈現JSX，你可以把它變成一個無狀態的功能部件 -

const TodoList = props => { 
     return(
      <div> 
       {props.todos.map(todo => <Todo key={todo.id} {...todo} />} 
      </div> 
    ) 
}

來源

2017-07-16 05:25:24

這是一個無狀態的組件，因此你可以只使用普通函數而不是類。另外，你並沒有在renderTodos中實現多重返回，因爲其中一個返回語句實際上是另一個函數（儘管你可以很容易地將它作爲一個單一的函數來刪除返回語句的必要性）。

請注意，宇宙飛船運算符「=>」表示.map的參數是ES6 arrow function。

function Todo(props) { 
    return props.todos.map(todo => <Todo key={todo.id} {...todo} />); 
}

來源

2017-07-16 05:26:57

由於您沒有州，您可以使您的整個組件functional。

function TodoList(props) { 
    return <div>{props.todos.map(todo => <Todo key={todo.id} {...todo} />)</div>; 
}

來源

2017-07-16 05:27:00

如何知道何時使用無狀態組件？我發現有時無狀態是沒有意義的，因爲我需要循環方法。比如在todoList組件中，你需要做無限滾動，你需要用戶滾動事件的生命週期方法。 –

在jsx中呈現一個列表的多個返回

回答

相關問題