我怎样才能正确地将我的代码从jscomplete移动到vscode做出反应？

Question

大家好，我是反应技术的新手，我正在研究一个项目，我首先在jscomplete上做了一个练习然后当我搬到vscode我有一些问题在哪里放我的代码我是在一页然后我移动它运行，但我不知道它可能是我使用的坏方式，现在我迷路了你可以请帮助我这是我的代码

import React, {Component} from 'react';
import './App.css';

const Data = (props) => {
  return (
    <div className="cardesign">
      <div style={{
        display: 'inLine-block',
        marginLeft: 10
      }}>
        <div
          style={{
          fontSize: '1.25em',
          fontWeight: 'bold'
        }}>
          {props.id}
        </div>
        <div>
          {props.label}</div>
      </div>
      <button onClick={props.delEvent}>Delete</button>
    </div>
  );
};
//---------------------------------------------------
const DataList = (props) => {
  return (
    <div>
      {props
        .data
        .map(data => <Data key={data.id} {...data}/>)}
    </div>
  );
}
// ---------------------------------------------------
class App extends Component {
  state = {
    data: {
      activities: [
        {
          id: 'A1',
          label: 'Activite 1'
        }, {
          id: 'A2',
          label: 'Activite 2'
        }
      ]
    }

  };

  // ---------------------------------------------------
  render() {
    return (
      <div className="App">
        < DataList data={this.state.data.activities}/>
      </div>
    );
  }
}

export default App;

Answer 1

您的代码看起来很好。接下来你应该做的是将每个部分分成单独的部分。

一些变化：

• 组件已从function转换为class es。 ES6类是打破组件的首选方式（或者至少是我看到它做得最多的方式）。
• 现在，props引用了每个班级中的this.props。
• state组件中的App通过constructor方法进行初始化，调用super方法以确保调用React.Component.constructor。

（请注意，Code Snippets不会在StackOverflow上运行，所以不要打扰;)）

App.js

import React, {Component} from 'react';
import './App.css';
import DataList from './DataList.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        activities: [
          {
            id: 'A1',
            label: 'Activite 1'
          }, {
            id: 'A2',
            label: 'Activite 2'
          }
        ]
      }
    };
  }

  render() {
    return (
      <div className="App">
        < DataList data={this.state.data.activities}/>
      </div>
    );
  }
}

export default App;

DataList.js

import { Component } from 'react';
import Data from './DataList.js';

class DataList extends Component {
  render() {
    return (
      <div>
        {this.props
          .data
          .map(data => <Data key={data.id} {...data} />)}
      </div>
    );
  }
}

export default DataList;

Data.js

import { Component } from 'react';

class Data extends Component {
  render() {
    return (
      <div className="cardesign">
        <div style={{
          display: 'inLine-block',
          marginLeft: 10
        }}>
          <div
            style={{
            fontSize: '1.25em',
            fontWeight: 'bold'
          }}>
            {this.props.id}
          </div>
          <div>
            {this.props.label}</div>
        </div>
        <button onClick={this.props.delEvent}>Delete</button>
      </div>
    );
  }
};

export default Data;