React的refs和虚拟DOM的用法

让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;