Question

我读到一篇文章，创建小型可重用组件会减小文件大小，使单元测试更快更容易，也更多。所以我现在正在尝试创建一个，但是我对reactjs很新，我正在为朋友维护这个项目，所以我没有编写所有代码。

下面是一段代码：

buildProperties {
    inputs.property("info.app.build.date", new Date().format('yyyy-MM-dd HH:mm:ss'))
}

所以我基本上想要对组件进行整个打开/关闭过程，因此我可以轻松地将逻辑重用于其他按钮。如果有人能帮助我，我真的很感激！

Answer 1

Here's a working example。

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

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

创建可重用的组件reactjs

1 个答案: