Question

我正在尝试理解下面的代码（来自Redux示例TODOMVC）如何使用类表示法编写。代码是

const App = ({todos, actions}) => (
  <div>
    <Header addTodo={actions.addTodo} />
    <MainSection todos={todos} actions={actions} />
  </div>

我尝试了以下操作，但它不起作用，我得到Warning: App(...): When calling super() in应用, make sure to pass up the same props that your component's constructor was passed.

class App extends React.Component {
  constructor({todos, actions}) {
      super({todos, actions});
      this.todos = todos;
      this.actions = actions;
  }

  render() {
      return(
        <div>
          <Header addTodo={this.actions.addTodo} />
          <MainSection todos={this.todos} actions={this.actions} />
        </div>
      )
  }
}

Answer 1

传递给App的是props。而({ todos, actions })只是从props解构。这应该有效：

class App extends React.Component {

  render() {
    const { todos, actions } = this.props;
    return(
      <div>
        <Header addTodo={actions.addTodo} />
        <MainSection todos={todos} actions={actions} />
      </div>
    )
  }
}

通过在构造函数中设置this.todo = todos，您将设置实例级属性。这意味着如果道具稍后更改，Header和MainSection将不会更新。

Answer 2

您可以简单地执行React要求的操作，将整个道具传递给超类并明确获取您想要的属性

class App extends React.Component {
  constructor(props) {
    super(props);
    this.todos = props.todos;
    this.actions = props.actions;
  }

  render() {
      return(
        <div>
          <h1>Actions: {this.actions}</h1>
          {/*<Header addTodo={this.actions.addTodo} />
          <MainSection todos={this.todos} actions={this.actions} />*/}
        </div>
      )
  }
}

ReactDOM.render(<App todos={[]} actions={'some action'} />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

这个React代码如何转换为类表示？

2 个答案: