在Codepen中，如何将React组件从一个笔导入到另一个笔中？

Question

export default class Wheel extends React.Component // Export default causes error
{
  constructor(props){
    super(props);

    this.state = {
      spin : false,
      value: 0
    };
    this.spin = this.spin.bind(this);
  }

  spin(e){

    var val = this.state.value + 720 + (Math.floor(Math.random() * 24) * 15);
    console.log((this.state.value % 360) / 15);
    e.target.style.webkitTransform = 'rotate(' + -val + 'deg)';
    e.target.style.webkitTransition = '-webkit-transform 4s ease-out';
    this.setState({value: val});
  }
  render(){
    const wheelVals = [800, "BANKRUPT", 200, 300, 350, 250, 400, 300, 200, 250, 500, 350, 250,
                      "BANKRUPT", 200, 300, 400, 250, 600, "LOSE A TURN", 200, 300, 250, 200];
    return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={(e) => this.spin(e)}/><br/><br/>{wheelVals[(this.state.value % 360) / 15]}
</div>);

  }
}

let { Grid, Row, Col, ButtonToolbar, Button } = ReactBootstrap;
// How do I import the class?
class CustomButton extends React.Component {
  onHandleClick = () => {
    this.props.onClick();
  };

  render(){

    return <Button bsStyle={this.props.bsStyle} onClick={this.onHandleClick}><strong>{this.props.text}</strong></Button>;

  }

}

class Letter extends React.Component {
  onHandleClick = () => {
    this.props.onClick(this.props.letter);
  };

  render () {
    const style = { border: '1px solid black',
                display: 'inline-block',
                fontSize: '3.5vw',
                width: '4vw',
                height: '10vh',
                textAlign: 'center',
                  whiteSpace: 'no-wrap',
                  overflow: 'hidden'};

    if (this.props.letter === ' ') style.border = '';
    return (

      <div 
        style={style} 
        key={this.props.key} 
        onClick={this.onHandleClick} // Have to pass onClick to div
      >
        {this.props.letter}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    var blanks = '';

    for (var i = 0; i < this.props.answer.length; ++i)
    {
      this.props.answer[i] === ' ' ?
        blanks += ' ': blanks += '-';

    }

    this.state = {
      phrase: blanks,
      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
      bonus: false,
      revealed: false
    };
    this.callLetter = this.callLetter.bind(this);
    this.bonusRound = this.bonusRound.bind(this);
    this.complete = this.complete.bind(this);
  }

  replaceAt(str, index, replacement) {
    return str.substr(0, index) + replacement + str.substr(index + replacement.length);
  }

  complete(){
    if (this.state.revealed === false)
    {
      this.setState({phrase: this.props.answer, revealed: true});


    }

  }
  checkForLetter(letter, phr)
  {

    this.setState((prevState, props) => {

      var prephrase = prevState.phrase;
      var index = phr.indexOf(letter);

      while( index !== -1)
      {
        prephrase = this.replaceAt(prephrase, index, letter);
        index = phr.indexOf(letter, index + 1);

      }
      return ({phrase: prephrase});
    });

  }

  callLetter(letter) {

    this.setState((prevState, props) => {
      var alphaclone = prevState.alpha;
      var letterindex = alphaclone.indexOf(letter);

      alphaclone = alphaclone.slice(0, letterindex) + alphaclone.slice(letterindex + 1);


      return ({alpha: alphaclone});


    });

    this.checkForLetter(letter, this.props.answer);
  }

  bonusRound(){

    if (this.state.bonus === false)
    {
      this.callLetter('R');

      this.callLetter('S');

      this.callLetter('T');

      this.callLetter('L');

      this.callLetter('N');

      this.callLetter('E');

      this.setState({bonus: true});
    }

  }

  render() {

    return (   
      <Grid>
        <Row className="show-grid" >
          {
            this.state.phrase.split(' ').map((item, j) =>
            (
                <div style = {{display:'inline-block'}}>
                <Letter letter = {' '}/>
                {item.split('').map((item, i) =>
                (                   
                  <Letter letter= {item}/>                   


                ))  }          
                </div>
            ))
          }

        </Row>
        <Row className="show-grid" style={{margin: '3vh'}}>
          {
            this.state.alpha.split('').map((item, i) =>
            (
                <Letter letter={item} key={i} onClick={this.callLetter}/> 
            ))
          }
        </Row>
        <Row className="show-grid" style={{margin: '3vh'}}>
          <ButtonToolbar>

            <CustomButton bsStyle = {"primary"} text= {"BONUS ROUND"} onClick = {this.bonusRound}/>
            <CustomButton bsStyle = {"danger"} text= {"REVEAL ALL"} onClick = {this.complete}/>
          </ButtonToolbar>
        </Row>
      </Grid>

    );
  }  
}

ReactDOM.render(
  <MyComponent answer='A VERY VERY EXCESSIVELY LONG TEST'/>,
  document.getElementsByClassName('container-fluid')[0]
);

非常感谢任何帮助。

编辑：我不敢相信我居然要明确声明我不想复制粘贴它。

Answer 1

为此，您必须使您的笔包含组件作为一个模块。您可以通过转到Settings>Javascript并选中Addtype=“module”复选框来完成此操作。

然后，可以使用钢笔的URL在另一支钢笔中导入组件：

import MyComponent from 'https://codepen.io/user/pen/xyz.js';

关于这一点的整个文档可以在这里找到:https://blog.codepen.io/2017/12/26/adding-typeModule-scripts-pens/。希望这有所帮助：）