javascript - 如何从 ReactJs 中的子组件跟踪父组件的状态？

Question

我有一个包含相册的页面，我需要通过单击相册组件中的编辑按钮来编辑每个相册。如果我没有公共(public)商店(例如 redux)，我将无法理解如何在组件之间进行通信如何从子组件跟踪父组件的状态 - 模态？

var AlbumsPage = React.createClass({

	render: function ()
	{
		return(
				<div>
					<AlbumList url="Album/List"/>
				</div>
			);
	}
});


var AlbumList = React.createClass({

	componentDidMount: function ()
	{
		$.ajax({
			url: this.props.url,
			dataType: 'json',
			method: "POST",
			cache: false,
			success: function (data) {
				this.setState({ data: data.Albums });
			}.bind(this),
			error: function (xhr, status, err) {
				console.error(this.props.url, status, err.toString());
			}.bind(this)
		});
	},

	getInitialState: function()
	{
		return this.getAlbumListState();
		
	},

	getAlbumListState: function()
	{
		return {
			data: [],
			currentAlbum: null,
			showModal: false
		}
	},

	setCurrentAlbum: function(album){
		this.state.currentAlbum = album;
	},

	setShowModal : function(val){
		this.state.showModal = val;
	},

	getShowModal: function(){
		return this.state.showModal;
	},

	render: function () {

		var albums = this.state.data.map(function(album) { 
			return (
				<Album key={ album.Id } title={ album.Title } getShowModal={ this.getShowModal } setCurrentAlbum={ this.setCurrentAlbum }  setShowModal={ this.setShowModal }></Album>
			  );
		}, this);
		

		return (
			<div>
				<div>
					{ albums }
				</div>
				<AlbumModal showModal={ this.state.showModal } currentAlbum={ this.state.currentAlbum }/>
			</div>
		);
	}
});

var Album = React.createClass({

	open : function()
	{
		console.log("open fired");
		console.log(this.props.getShowModal());
		if (this.props.getShowModal()) {
			this.props.setShowModal(false);
			this.props.setCurrentAlbum(null);
		} else {
			this.props.setShowModal(true);
			this.props.setCurrentAlbum(this.props.album);
		}
	},

	render: function () {
		return (
				<div className="col-sm-3 col-md-3">
				<div className="thumbnail">
					<div className="caption">
						<h3>{ this.props.title }</h3>
						<p>
							<a onClick={ this.open }><span className="glyphicon glyphicon-pencil"></span></a>
							<a><span className="glyphicon glyphicon-trash"></span></a>
						</p>
					</div>
				</div>
				</div>
		);
	}
});


var AlbumModal = React.createClass({

	getInitialState: function() {
		
		return {

			showModal: this.props.showModal,
			currentAlbum: this.props.currentAlbum
		};
	},


	close: function() {
		this.setState({ showModal: false });
	},

	open: function() {
		this.setState({ showModal: true });
	},

	render: function() {
		return (
      <div>
        <ReactBootstrap.Modal show={this.state.showModal} onHide={this.close}>
          <ReactBootstrap.Modal.Header closeButton>
            <ReactBootstrap.Modal.Title>Modal heading</ReactBootstrap.Modal.Title>
          </ReactBootstrap.Modal.Header>
          <ReactBootstrap.Modal.Body>
            <h4>Text in a modal</h4>
          </ReactBootstrap.Modal.Body>
          <ReactBootstrap.Modal.Footer>
            <ReactBootstrap.Button onClick={this.close}>Close</ReactBootstrap.Button>
          </ReactBootstrap.Modal.Footer>
        </ReactBootstrap.Modal>
      </div>
      )
}
});

ReactDOM.render(
  <AlbumsPage />,
  document.getElementById('albums')
);

Answer 1

您必须将父组件作为 prop 传递给子组件。

所以在你的 AlbumList::render ，你必须做
return (
<Album
key={ album.Id }
title={ album.Title }
getShowModal={ this.getShowModal }
setCurrentAlbum={ this.setCurrentAlbum }
setShowModal={ this.setShowModal }
parent={this}
>
</Album>
);


但是一旦您开始将状态传递给许多不同的组件，这将产生巨大的开销。

解决这个问题的一个好插件是使用 Redux