让html标签原样输出,使用dangerouslySetInnerHTML
function App() {
var name = "<span style='color: #FF0000;'>张三</span>";
return (
<div className="App">
欢迎<span dangerouslySetInnerHTML={{__html: name}}></span>进入react学习
</div>
);
}
export default App;
refs的使用,相当于js的id,获取组件
class App extends Component {
componentDidMount() {
var i=1;
console.log(this.refs['goods_'+i+''].innerHTML);
console.log(this.refs.goods_1.innerHTML);
}
render() {
return (
<div>
<div ref="goods_1">潮流女装</div>
</div>
)
}
}
export default App;
虚拟DOM,可以跨组件获取组件,性能比document.getElementById好
class App extends Component {
componentDidMount() {
var i=1;
console.log(this.refs['goods_'+i+''].innerHTML);
console.log(this.refs.goods_1.innerHTML);
console.log(ReactDOM.findDOMNode(document.getElementById('goods')).innerHTML);
}
render() {
var name = "<span style='color: #FF0000;'>张三</span>";
return (
<div>
欢迎<span dangerouslySetInnerHTML={{__html: name}}/>学习
<div ref="goods_1" id='goods'>潮流女装</div>
</div>
)
}
}
export default App;