Question

我一直在做React课程，但我从未见过的一件事就是重复使用组件。例如，如果我有一个按钮，并且每次单击该按钮时都想生成一个div。我如何使用React组件来实现它，该组件的唯一目的是渲染单个div，并且该按钮使用该组件在每次单击时向页面添加额外的div？

Answer 1

你是说，是这样的吗？

CustomButton无状态组件（表示性）只接收道具，可以禁用，可以更改文本并定义回调。它没有任何自己的状态，可以在您需要按钮的整个应用程序中重复使用。

ButtonSampleApp是一个容器组件，它使用presentional组件并为其提供回调，然后处理该回调。在其中添加div的渲染。 ButtonSampleApp使用组件状态来实现此目的

＆＃13;

const CustomButton = ({ text, callback, isEnabled }) => {
  return <button onClick={() => callback()} disabled={!isEnabled} type="button">{ text }</button>;
};

class ButtonSampleApp extends React.Component {
  constructor() {
    super();
    this.state = {
      divs: []
    };
  }
  onButtonClicked() {
    const { divs } = this.state;
    this.setState( { divs: [...divs, { text: divs.length }] });
  }
  render() {
    const { max } = this.props;
    const { divs } = this.state;
    return (<div>
      <h1>Click on button to add a max of { max } divs</h1>
      <div>
      { divs && divs.map( ({text}) => <div key={text}>{ text }</div> ) }
      </div>
      <CustomButton isEnabled={!divs || divs.length < max}  text="Add button" callback={() => this.onButtonClicked()} />
    </div>);
  }
}

ReactDOM.render( <ButtonSampleApp max={10} />, document.querySelector('#container') );

＆＃13;

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<div id="container"></div>

＆＃13;

重用React组件

1 个答案: