Reactjs 创建可重用组件

我读过一篇文章，其中提到创建可重用的小组件可以减少文件大小，使单元测试更快、更容易，而且效果更好。所以我现在正在尝试创建一个，但是我对reactjs非常陌生，我正在为一个朋友维护这个项目，所以我还没有编写所有的代码

下面是一段代码片段：

class ObjectKeyDisplay extends Component {
  constructor(props) {
    super(props)
    this.state = { open: false } // Sets open to false (closed)
  }

  renderInner() {
    const { schema, parentDocumentId, collectionName, value } = this.props
    const { open } = this.state // equals const open = this.state.open

    let expandButton
    if (schema.type === 'belongs_to') {
      expandButton = (
        <button onClick={e => this.setState({ open: !open })}> // Sets it to true (opened)
          {open ? 'Minimera' : 'Expandera'}
        </button>
      )
    }

类ObjectKeyDisplay扩展组件{
建造师（道具）{
超级（道具）
this.state={open:false}//将open设置为false（closed）
}
renderiner（）{
const{schema，parentDocumentId，collectionName，value}=this.props
const{open}=this.state//等于const open=this.state.open
让我们打开按钮
如果（schema.type=='属于'）{
展开按钮=(
this.setState（{open:！open}}>//将其设置为true（opened）
{打开？'Minimera'：'Expandera'}
)
}

因此，我基本上希望将整个打开/关闭过程变成一个组件，因此我可以轻松地将逻辑用于其他按钮。如果有人能在这里帮助我，我将不胜感激！

将按钮移动到它自己的组件中，它可以控制自己的打开状态。另外，当状态更改时提供一些回调也是一个好主意，可以在父组件中使用。有多种方式有条件地呈现按钮内容。我在这里做的是传入一个子数组，如果

open

如果为true，则渲染数组中的第一个子级

class Main extends React.Component {
    render(){
    return (
        <div>
        Expand button
        <ExpandButton onOpen={() => console.log('opened')} onClose={() => console.log('closed')} >
            <div>Open</div>
          <div>Close</div>
        </ExpandButton>
      </div>
    )
  }
}
class ExpandButton extends React.Component {
    constructor(){
    super();
    this.toggleOpen = this.toggleOpen.bind(this);
    this.state = {
        open: false
    }
  }
  toggleOpen(){
    this.setState({
        open: !this.state.open
    }, () => {
        // Trigger callbacks
        if(this.state.open){
        this.props.onOpen();
      }else{
        this.props.onClose();
      }
    })
  }
    render(){
    const { open } = this.state;
    return (
        <button onClick={this.toggleOpen}>
        {open ? this.props.children[0] : this.props.children[1]}
      </button>
    )
  }
}
React.render(<Main />, document.getElementById('container'));

类主扩展React.Component{
render（）{
返回(
展开按钮
console.log（'opened'）}onClose={（）=>console.log（'closed'）}>
打开
接近
)
}
}
类ExpandButton扩展React.Component{
构造函数（）{
超级（）；
this.toggleOpen=this.toggleOpen.bind（this）；
此.state={
开放：假
}
}
toggleOpen（）{
这是我的国家({
打开：！this.state.open
}, () => {
//触发回调
if（this.state.open）{
this.props.onOpen（）；
}否则{
this.props.onClose（）；
}
})
}
render（）{
const{open}=this.state；
返回(
{打开？this.props.children[0]：this.props.children[1]}
)
}
}
React.render（，document.getElementById（'container'）；

我想您缺少代码了。但我想，如果您正在寻找功能的可重用性，您应该深入研究高阶组件模式