想了解更多關於道具和狀態的信息

Question

我試過看書和觀看關於JS和React的視頻，但我仍然沒有更好地瞭解React-Props & States。 有人可以詳細解釋我。

Answer 1

道具 組件道具可以被認爲是一個組件的選項。它們作爲組件的參數給出，看起來完全像HTML屬性。

值得注意的是，組件不應該改變它的道具，它們是不可改變的。如果組件的數據是可變的，則使用狀態對象。

var Photo = React.createClass({ 
    render: function() { 
    return (
     <div className='photo'> 
     <img src={this.props.src} /> 
     <span>{this.props.caption}</span> 
     </div> 
    ); 
    } 
}); 

React.render(<Photo src='http://example.com/lkevsb9' caption='Hong Kong!' />, document.body); 

國家 狀態對象是內部同一個組件。它擁有可隨時間變化的數據。

在我們可以使用狀態之前，我們需要爲初始狀態聲明一組默認值。這是通過定義一個名爲getInitialState（）的方法並返回一個對象來完成的。

使用setState方法設置狀態。調用setState觸發UI更新。 設置狀態只能從組件內完成。

var InterfaceComponent = React.createClass({ 
    getInitialState : function() { 
    return { 
     name : "chris" 
    }; 
    }, 
    handleClick : function() { 
    this.setState({ 
     name : "bob" 
    }); 
    }, 
    render : function() { 
    return <div onClick={this.handleClick}> 
     hello {this.state.name} 
    </div>; 
    } 
}); 

React.renderComponent(
    <InterfaceComponent />, 
    document.body 
);