Question

我可以解决的问题 - 我想知道是否有更好的方法。基本上，我正在传递delete作为道德来自CoursesPage＆gt;课程列表＆gt; CourseListRow。 CourseListRow是触发onDelete的地方，我通过event.target.value将我要删除的课程的id传递给CoursesPage容器组件中的deleteCourse函数。

有更清洁的方法吗？在这种情况下使用上下文是否有意义？

容器组件中的渲染方法：

CoursesPage.js

render() {
    const {courses} = this.props;
    return (
      <div>
        <h1>Courses</h1>
        <input type="submit"
               value="Add Course"
               className="btn btn-primary"
               onClick={this.redirectToAddCoursePage}/>

        <CourseList
                courses={courses}
                onDelete={this.deleteCourse}/>
      </div>

    );
  }

第一级：

CourseList.js

import React, {PropTypes} from 'react';
import CourseListRow from './CourseListRow';

const CourseList = ({courses, onDelete}) => {
  return (
    <table className="table">
      <thead>
      <tr>
        <th>&nbsp;</th>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Length</th>
      </tr>
      </thead>
      <tbody>
      {courses.map(course =>
        <CourseListRow key={course.id} course={course} onDelete={onDelete}/>
      )}
      </tbody>
    </table>
  );
};

CourseList.propTypes = {
  courses: PropTypes.array.isRequired
};

export default CourseList;

第二级：

CourseListRow.js

import React, {PropTypes} from 'react';
import {Link} from 'react-router';

const CourseListRow = ({course, onDelete}) => {
  return (
    <tr>
      <td><a href={course.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/course/' + course.id}>{course.title}</Link></td>
      <td>{course.authorId}</td>
      <td>{course.category}</td>
      <td>{course.length}</td>
      <td>
        <button
          type="submit"
          name="deleteCourseButton"
          onClick={onDelete}
          value={course.id}
        > Delete </button>
      </td>

    </tr>
  );
};

CourseListRow.propTypes = {
  course: PropTypes.object.isRequired
};

export default CourseListRow;

Answer 1

如果您使用redux for store和react-redux进行组件和商店之间的连接，在大多数情况下，您不应该将道具传递到一个级别以上（有时您可能根本不会传递它们）。本教程有点方便：http://redux.js.org/docs/basics/UsageWithReact.html

简化示例，假设您熟悉redux并且看过react-redux API：

最好使用隔离组件并使用连接器。

 // assume, that CoursesList is your App
 <Provider store={store}>
   <CoursesList/>
 <Provider>

在此之后，连接使用商店数据的每个组件。

// CoursesListContainer.js
import {connect} from 'react-redux';
import CoursesList from './CoursesListComponent.js'

function mapStateToProps(state) { return state.courses; }

export default connect(mapStateToProps)(CoursesList);

在ypur应用程序的最深处，你将为按钮制作容器：

//DeleteButtonContainer.js
import {connect} from 'react-redux';
import actionCreators from './actionCreators'
import DeleteButton from './DeleteButtonComponent';

function mapStateToProps() { return {};}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    onClick: () => dispatch(actionCreators.deleteCourse(ownProps.id))
}

export default connect(mapStateToProps, mapDispatchToProps)(DeleteButton);

在你的行中你只需导入非ButtonComponent，但ButtonContainer并将id设置为props。

React-Redux，将容器方法的引用传递给多层深度？

1 个答案: