尝试将所有组件都改成es6 [英] Trying to change all the components into es6

问题描述

• 我正在尝试将所有组件更改为 es6
• 我做了两个，但不知道如何做第三个.
• 你能告诉我如何改变它吗?

• 在下面提供我的代码.

• I am trying to change all the components into es6
• I did for two but not sure how to do for the third one.
• can you tell me how to change it?

• providing my code below.

export default class FirstTimeTab extends React.Component{

  getInitialState(){
    return {
       'panes' : [

        <div className="sports-tab-content">
            <p className="sports-large-text ft-day1 ft-day2">

推荐答案

您有多个小错误，一个接一个，需要修复.我强烈建议您进行较小的更改，以便您可以更轻松地跟踪开发过程中出现的问题.

You had multiple small errors, one after another, that needed to be fixed. I highly recommend you make smaller changes so you can track more easily what goes wrong during development.

更新小提琴

首先，从export default class FirstTimeTab extends React.Component中移除export default.在像我们在这里所做的那样在单文件 Fiddle 中工作时，这不是必需的.

First, remove export default from export default class FirstTimeTab extends React.Component. This isn't necessary when working in a single-file Fiddle like we are doing here.

这就给你了

class FirstTimeTab extends React.Component {
  ...

从那里运行会给你 App 未定义的控制台错误:

Running from there will give you the console error that App is undefined:

ReactDOM.render(<App />, document.querySelector('.container'));

这完全正确，因为您将 App 更改为 FirstTimeTab.将此更改为使用 <FirstTimeTab/> 后，您将收到另一个有用的控制台错误:

Which is entirely true, since you changed App to FirstTimeTab. After changing this to use <FirstTimeTab />, you'll get yet another helpful console error that:

> getInitialState was defined on FirstTimeTab, a plain JavaScript class. This is
only supported for classes created using React.createClass. Did you mean to
define a state property instead?

此消息非常清楚:您不能将 getInitialState 与 class 语法一起使用.相反，更改为在 constructor 中设置初始 state 属性的更清晰的方法:

This message is pretty clear: you can't use getInitialState with the class syntax. Instead, change to the more clear method of setting the initial state property in the constructor:

constructor() {
  super();
  this.state = {
    'panes' : [
       <div className="sports-tab-content">
       ...

最后，在正确显示内容之前，您仍然看不到任何内容.您在每个 Pane 的 content 属性中设置内容，而您的其余代码似乎希望它作为 children 传递(这是 React 中更正确的方式):

Finally, you still won't see anything until you properly display your content. You were setting the content in the content attribute of each Pane, when it seems like the rest of your code expects it to be passed as children (which is the more correct way in React):

render () {
  return (
    <Tabs selected={0} changeContent={this.changeContent}>
      <Pane label="Account Setup" subtitle="Days 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
        {this.state.panes[0]} // Content passed as children
      </Pane>
     ...

进行后续

您一直在用这些代码指定所需的道具:

You've been specifying required props with these bits of code:

Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

例如，上述说明您需要 label 和 children 用于 Pane.

The above states, for examples, that you require a label and children for the Pane.

如果您的错误是Required prop content is not specified in Pane，这意味着您在代码中的某处需要content 作为一个属性.在我上面的回答中，我建议您从在 content 中传递您的内容切换到通过 children 属性传递它.如果您遵循该建议，只需删除导致此要求的行.它应该看起来像我上面添加的那段代码，尽管我在你的原始 Fiddles 中没有看到这方面的证据.也许这是你后来添加的东西.

If your error is Required prop content was not specified in Pane, this means somewhere in your code you are requiring content as an attribute. In my answer above, I recommended you switch from passing your content in content to passing it through the children property. If you followed that advice, just remove the line that causes this requirement. It should look like the piece of code I added above, though I saw no evidence of that in your original Fiddles. Maybe it was something you added later.

这篇关于尝试将所有组件都改成es6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！