反應智能/啞組件模式更改數據

Question

我開始實施，其中「啞巴」組件對此一無所知的環境，並通過接收所有道具它的數據的智能/啞組件模式。當啞組件必須提交或更改數據時，您會做什麼？它如何與外界溝通，仍然是「愚蠢的」？

這是我用來判斷這個模式的基本例子。如果我將事件添加到更新數據庫中的計數器的MyTask組件中，那麼會處理該事件？

// components/MyList.jsx 

import React from 'react'; 

export default class MyList extends React.Component { 
    render() { 
     return(
      <div> 
       <h3>{this.props.listName}</h3> 
       <ul> 
        {this.props.tasks.map((task) => (
         <MyTask key={task.id} task={task} /> 
        ))} 
       </ul> 
      </div> 
     ); 
    } 
} 
MyList.propTypes = { 
    listName: React.PropTypes.string.isRequired, 
    tasks: React.PropTypes.array.isRequired, 
} 



export class MyTask extends React.Component { 
    render() { 
     return (
      <li>{this.props.task.text}</li> 
     ); 
    } 
} 
MyTask.propTypes = { 
    task: React.PropTypes.object.isRequired, 
} 

和應用程序：

// app.jsx 

import React from 'react'; 
import MyList from './components/MyList.jsx' 


export class TaskApp extends React.Component { 

    getList() { 
     return('Today Stuff'); 
    } 

    getTasks() { 
     return([ 
      {id: 1, text: 'foo'}, 
      {id: 2, text: 'diggity'}, 
      {id: 3, text: 'boo'}, 
      {id: 4, text: 'bop'} 
     ]); 
    } 

    render() { 
     return (
      <MyList listName={this.getList()} tasks={this.getTasks()} /> 
     ); 
    } 
} 

Answer 1

一般來說，你可以通過將'智能'組件的函數引用傳遞給你的'啞'組件來處理這個問題。愚蠢的組件然後不負責實現與該功能相關的任何邏輯，只是告訴智能組件「我已被點擊」。

在這種情況下，你的app.jsx類TaskApp裏面你可以有你的點擊處理程序：

//app.jsx 
... 
handleClick() { 
    // Update the DB counter by 1 
} 
... 
render() {} 

然後通過你的組件通過handleClick爲道具：

<MyList listName={this.getList()} tasks={this.getTasks()} handleClick={this.handleClick} /> 

<MyTask key={task.id} task={task} handleClick={this.props.handleClick} /> 

並執行它在MyTask組件中單擊列表元素時：

<li onClick={this.props.handleClick}>{this.props.task.text}</li> 

讓我請注意，如果handleClick（）函數完全使用'this'，那麼當您將它傳遞給函數引用時（或將其綁定到構造函數中/使用ES6胖箭頭功能）。

編輯：對於其他方式的例子綁定「這個」，你可以在你的類的構造函數分配綁定功能，以您的this.handleClick參考，所以：

export default class TaskApp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
    } 

... 
... 
} 

這允許你使用this.handle點擊你通常期望的方式。

或者你可以使用ES6脂肪箭頭功能，其中保存的「本」，當他們被稱爲上下文：

<MyList 
    listName={this.getList()} 
    tasks={this.getTasks()} 
    handleClick={() => this.handleClick} /> 

Answer 2

假設TaskApp是智能型組件和MYLIST是愚蠢的組成部分，它應該像

智能組件

// app.jsx 

import React from 'react'; 
import MyList from './components/MyList.jsx' 


export class TaskApp extends React.Component { 

    getList() { 
     return('Today Stuff'); 
    } 

    getTasks() { 
     return([ 
      {id: 1, text: 'foo'}, 
      {id: 2, text: 'diggity'}, 
      {id: 3, text: 'boo'}, 
      {id: 4, text: 'bop'} 
     ]); 
    } 
    handleClick(task){ 
     // update the db here 
    } 

    render() { 
     return (
      <MyList listName={this.getList()} tasks={this.getTasks()} 
       onClick={this.handleClick}/> 
     ); 
    } 
} 

啞組件

// components/MyList.jsx 

import React from 'react'; 

export default class MyList extends React.Component { 
    render() { 
     return(
      <div> 
       <h3>{this.props.listName}</h3> 
       <ul> 
        {this.props.tasks.map((task) => (
         <MyTask onClick={() => this.props.onClick(task)} 
          key={task.id} task={task} /> 
        ))} 
       </ul> 
      </div> 
     ); 
    } 
} 
MyList.propTypes = { 
    listName: React.PropTypes.string.isRequired, 
    tasks: React.PropTypes.array.isRequired, 
} 



export class MyTask extends React.Component { 
    render() { 
     return (
      <li onClick={this.props.onClick}>{this.props.task.text}</li> 
     ); 
    } 
} 
MyTask.propTypes = { 
    task: React.PropTypes.object.isRequired, 
} 

Answer 3

您可以通過事件處理程序回調爲道具，以MyTask：

<MyTask onClick={this.handleTaskClick.bind(this)} ... /> 

然後在MyTask使用它：

<li onClick={this.props.onClick}>...</li> 

參見：https://facebook.github.io/react/docs/tutorial.html#callbacks-as-props