反应智能/哑组件模式更改数据

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