react-动态添加组件

最新推荐文章于 2024-05-10 09:55:11 发布

科学的发展-只不过是读大自然写的代码

最新推荐文章于 2024-05-10 09:55:11 发布

阅读量5k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/100161999

版权

react 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Toggle2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
	<div>
	  	
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
	  </div>
    );
  }
}
var ta = new Toggle2();
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true,Toggle2:5};

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    const operations = [];
	operations.push(<div>ddddd</div>);
	operations.push(<div>ddddd2</div>);
    return (
	<div>
		{operations}
		<div>{(this.state.Toggle2)}</div>
		<Toggle2 />
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
	  </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);
</script>

</body>
</html>

科学的发展-只不过是读大自然写的代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react-动态添加组件

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React 实例</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">...
复制链接

扫一扫