*dangerouslySetInnerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color: "red"
}
var rawHtml = {
__html: "<h1>hello,Q</h1>"
}
React.render(<div style={style} dangerouslySetInnerHTML={rawHtml}></div>, document.body)
</script>
</body>
*ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color: "red"
}
var rawHtml = {
__html: "<h1>hello,Q</h1>"
}
var HelloWorld = React.createClass({
render: function () {
this.refs.childp
return <p ref="childp">hello</p>
}
})
React.render(<div style={style} dangerouslySetInnerHTML={rawHtml}></div>, document.body)
</script>
</body>
</html>
*key(性能相关:列表要加上唯一key，相似组件尽量合并)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var style = {
color: "red"
}
var rawHtml = {
__html: "<h1>hello,Q</h1>"
}
var HelloWorld = React.createClass({
render: function () {
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
})
React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body)
</script>
</body>
</html>
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
