尝试将所有组件更改为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.像我们在这里那样在单文件小提琴中工作时，这不是必需的.

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.

如果您的错误是未在Pane 中指定必需的道具content，则意味着您在代码中的某处需要使用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屋！