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;