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

我有两支钢笔，我正在尝试使用一支钢笔中定义的React组件，但我不清楚Codepen如何处理钢笔之间的React导入。我转到目标笔并将源笔的地址添加到Javascript引用中，但我不知道如何从那里开始。我可以使用传统的导出在本地节点项目中实现这一点，但是Codepen元素给我带来了麻烦。代码如下：

来源（）：

导出默认类。组件//导出默认导致错误
{
建造师（道具）{
超级（道具）；
此.state={
自旋：错，
数值：0
};
this.spin=this.spin.bind（this）；
}
自旋（e）{
var val=this.state.value+720+（Math.floor（Math.random（）*24）*15）；
console.log（（this.state.value%360）/15）；
e、 target.style.webkitttransform='rotate（'+-val+'deg'）；
e、 target.style.webkitTransition='-webkit transform 4s ease out'；
this.setState（{value:val}）；
}
render（）{
常数wheelVals=[800，“破产”，200300350250400300200250500350250，
“破产”，200300400250600，“失去一个回合”，200300250200]；
返回（this.spin（e）}/>

{wheelVals[（this.state.value%360）/15]}
);
}
}

目的地（）：

let{Grid，Row，Col，ButtonToolbar，Button}=ReactBootstrap；
//如何导入该类？
类CustomButton扩展React.Component{
onHandleClick=（）=>{
this.props.onClick（）；
};
render（）{
返回{this.props.text}；
}
}
类字母扩展了React.Component{
onHandleClick=（）=>{
this.props.onClick（this.props.letter）；
};
渲染（）{
常量样式={border:'1px纯黑'，
显示：“内联块”，
fontSize:'3.5vw'，
宽度：“4vw”，
高度：“10vh”，
textAlign:'中心'，
空白：“无换行符”，
溢出：'隐藏'}；
如果（this.props.letter==''）style.border=''；
返回(
{this.props.letter}
);
}
}
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
var空白=“”；
对于（变量i=0；i{
var prephrase=prevState.phrase；
var指数=phr.indexOf（字母）；
而（索引！=-1）
{
prephrase=this.replaceAt（prephrase，index，letter）；
索引=phr.indexOf（字母，索引+1）；
}
返回（{短语：prephrase}）；
});
}
来电信{
this.setState（（prevState，props）=>{
var alphaclone=prevState.alpha；
var letterindex=alphaclone.indexOf（字母）；
alphaclone=alphaclone.slice（0，letterindex）+alphaclone.slice（letterindex+1）；
返回（{alpha:alphaclone}）；
});
this.checkForLetter（字母，this.props.response）；
}
骨圆{
如果（this.state.bonus===false）
{
这是一个.callLetter（'R'）；
这是一个呼叫字母（'S'）；
这是一个调用字母（'T'）；
这是一个调用字母（'L'）；
这是一个.callLetter（'N'）；
这是一个调用字母（'E'）；
this.setState（{bonus:true}）；
}
}
render（）{
报税表（
{
this.state.phrase.split（“”）.map（（项，j）=>
(
{item.split（''）.map（（item，i）=>
(                   
))  }          
))
}
{
this.state.alpha.split（“”）.map（（项，i）=>
(
))
}
);
}  
}
ReactDOM.render(
,
document.getElementsByClassName（'container-fluid'）[0]
);

非常感谢您的帮助

---

编辑：我不敢相信我实际上必须明确声明我不想复制和粘贴它。

为此，您必须将包含该组件的笔制作为一个模块。您可以通过转到设置>Javascript并选中添加

type=“module”

复选框来完成此操作

然后，您可以使用笔的URL将组件导入另一支笔：

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

可在此处找到与此相关的完整文档：。

---

希望这有帮助：）

非常感谢！我可以从这里找到答案。

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]
);

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