Question

我是React-Redux的新手。我试图在我的项目中加入这项技术，虽然目前我没有太多用处，除了不喜欢我看到的所有例子中的语法。

以下是语法：

import React, { PropTypes } from 'react'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

export default TodoList

我怎样才能转换为其他语法？：

import React, { PropTypes } from 'react'
import Todo from './Todo'

export default class TodoList extends React.Component {
constructor(todos, onTodoClick){
  super();
  this.todos = todos;
  this.onTodoClick = onTodoClick;
}

render() {
  return(
    <ul>
      {todos.map(todo =>
        <Todo
          key={todo.id}
          {...todo}
          onClick={() => onTodoClick(todo.id)}
        />
      )}
    </ul>
  );
}
}

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
onTodoClick: PropTypes.func.isRequired
}

谢谢大家。

Answer 1

如果确实想要将无状态组件转换为ES6类组件，则可以直接在组件中使用this.props。

类组件被赋予一个名为props的特殊值，该值包含安装时给出的所有值，例如

<MyComponent value={1} />

在这种情况下，this.props看起来像{ value: 1 }。

因此，您可以将组件更改为

import React, { PropTypes } from 'react'
import Todo from './Todo'

export default class TodoList extends React.Component {

  render() {
    return(
      <ul>
        {this.props.todos.map(todo =>
          <Todo
            key={todo.id}
            {...todo}
            onClick={() => this.props.onTodoClick(todo.id)}
          />
        )}
      </ul>
    );
  }
}

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

在某些情况下，this.props的重复使用可能会开始变得有点笨拙，所以你可以将道具解压缩到变量中，这样就可以把事情搞得一团糟了，像这样

import React, { PropTypes } from 'react'
import Todo from './Todo'

export default class TodoList extends React.Component {

  render() {
    const { todos, onTodoClick } = props

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

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

旁注：这样的组件（可能Todo）可以从扩展PureComponent而不是Component中受益，以避免不必要的重新渲染提高绩效。

在构造函数中使用props 技术上可能

constructor(props) {
  super(props);
  this.todos = props.todos;
  this.onTodoClick = props.onTodoClick;
}

或

constructor({ todos, onTodoClick }) {
  super(props);
  this.todos = todos;
  this.onTodoClick = onTodoClick;
}

并将您的render功能更改为

render() {
  return(
    <ul>
      {this.todos.map(todo =>
        <Todo
          key={todo.id}
          {...todo}
          onClick={() => this.onTodoClick(todo.id)}
        />
      )}
    </ul>
  );
  }

但我建议不要将此作为一种常用模式。 constructor仅在安装组件之前调用一次，因此对props的任何更改都不会导致再次调用构造函数。

您可以通过实施componentWillReceiveProps并更新变量来解决这个问题，但这对于您要实现的目标来说感觉过于复杂。

在ES6类之间转换React

1 个答案: