0

「ダム」コンポーネントがその環境について何も知らず、小道具を通じてすべてのデータを受け取るスマート/ダム コンポーネント パターンの実装を開始しています。ダムコンポーネントがデータを送信または変更する必要がある場合はどうしますか? どうすれば外の世界と通信でき、なおかつ「ばか」でいられるのでしょうか?

これが、このパターンを理解するために使用している私の基本的な例です。DB のカウンターを更新するコンポーネントにonClickイベントを追加するとしたら、そのイベントを処理するのは何ですか?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()} />
        );
    }
}
4

3 に答える 3

1

イベント ハンドラー コールバックを prop として次のように渡すことができます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

于 2016-05-13T14:45:07.523 に答える