如何整合外部反应

时间:2018-06-03 02:49:46

标签: reactjs

我使用CMS构建接口,需要React JS通过CDN链接集成到系统中。尝试加载某些组件时,它会给我一个错误。我是否必须明确地继续加载组件或是否有其他方法?我使用以下链接:

`



<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

<div id="react-container"></div>
<script type="text/babel">

		class Note extends React.Component {
			constructor(props) {
				super(props)
				this.state = {
					checked: true,
					activePage: 1
				}
				this.handleCheck = this.handleCheck.bind(this)
			}

			handleCheck() {
				this.setState({
					checked: !this.state.checked
				})
			}
			handlePageChange(pageNumber) {
		
        		this.setState({activePage: pageNumber});
        	  }
        	  
			render() {
				var msg 
				if(this.state.checked) {
					msg = "checked"
				} else {
					msg = "not checked"
				}
				return (
					<div>
						<input type="checkbox" 
						       onChange={this.handleCheck}
						       defaultChecked={this.state.checked}/>
					<Pagination
			hideNavigation
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={450}
          pageRangeDisplayed={10}
          onChange={this.handlePageChange}
        />
					</div>
				)
			}
		}
		
		ReactDOM.render(
			<Note />,
			document.getElementById('react-container')
		)

	</script>
&#13;
&#13;
&#13;

`

此外,有时它会让我出现内存错误。 浏览器挂起。

1 个答案:

答案 0 :(得分:1)

以下是如何将cdn用于reactjs的示例。希望它有所帮助:)

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {

    render() {
        const name = 'Johnson';
        return (<p>Hello world {name}</p>);
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>
相关问题