在ReactJS中的父组件内设置子组件的prop

Question

我正在创建一个分页表，我希望能够自定义我的行输出。

看起来像。

    var PagedTable = React.createClass({


    	propTypes:{
    		'table_headers' : React.PropTypes.array,
    		'table_rows' : React.PropTypes.array
    	},
    	getInitialState: function(){
    		return{
    			pageSize: 10,
    			currentPage: 1
    		}
    	},
    	componentWillReceiveProps: function(nextProps) {
    		this.setState({
    			currentPage: 1
    		})
    	},
    	getPage: function(){
    		var start = this.state.pageSize * (this.state.currentPage - 1);
    		var end = start + this.state.pageSize;

    		return{
    			currentPage: this.state.currentPage,
    			table_rows: this.props.table_rows.slice(start, end),
    			numPages: this.getNumPages(),
    			handleClick: function(pageNum) {
    				return function() {
    					this.handlePageChange(pageNum)
    				}.bind(this)
    			}.bind(this)
    		}	
    	},
    	getNumPages: function() {
    		var numPages = Math.floor(this.props.table_rows.length / this.state.pageSize);
    		if (this.props.table_rows.length % this.state.pageSize > 0){
    			numPages++
    		}
    		return numPages			
    	},
    	handlePageChange: function(pageNum) {
    		this.setState({currentPage: pageNum})
    	},
    	render:function(){
    		var page = this.getPage();
    		var topics = page.table_rows.map(function(row) {
    			return <IncompleteRow row={row}/>
    		});
    		return <div>
    		  <table className="table table-hover table-primary table-bordered colm-freeze">
    		    <PagedRowHeader header_row={this.props.table_headers}/>
    		    {topics}
    		  </table>
    		</div>
    	}
    });

以上代码已修改，但高度基于：this。

    var PagedTable = React.createClass({


    	propTypes:{
    		'table_headers' : React.PropTypes.array,
    		'table_rows' : React.PropTypes.array
    	},
    	getInitialState: function(){
    		return{
    			pageSize: 10,
    			currentPage: 1
    		}
    	},
    	componentWillReceiveProps: function(nextProps) {
    		this.setState({
    			currentPage: 1
    		})
    	},
    	getPage: function(){
    		var start = this.state.pageSize * (this.state.currentPage - 1);
    		var end = start + this.state.pageSize;

    		return{
    			currentPage: this.state.currentPage,
    			table_rows: this.props.table_rows.slice(start, end),
    			numPages: this.getNumPages(),
    			handleClick: function(pageNum) {
    				return function() {
    					this.handlePageChange(pageNum)
    				}.bind(this)
    			}.bind(this)
    		}	
    	},
    	getNumPages: function() {
    		var numPages = Math.floor(this.props.table_rows.length / this.state.pageSize);
    		if (this.props.table_rows.length % this.state.pageSize > 0){
    			numPages++
    		}
    		return numPages			
    	},
    	handlePageChange: function(pageNum) {
    		this.setState({currentPage: pageNum})
    	},
    	render:function(){
    		var page = this.getPage();
    		var topics = page.table_rows.map(function(row) {
    			return <IncompleteRow row={row}/>
    		});
    		return <div>
    		  <table className="table table-hover table-primary table-bordered colm-freeze">
    		    <PagedRowHeader header_row={this.props.table_headers}/>
    		    {topics}
    		  </table>
    		</div>
    	}
    });

或喜欢

    <PagedTable>
      <IncompleteRow/>
    </PagedTable>

如你所见。现在我在render方法中设置了不完整的行。但我想让这个组件可扩展。这意味着我希望能够呈现不同类型的行。

问题是要知道我需要在PagedTable类中呈现哪些行，因为它知道当前应该显示哪些行。所以我的PagedTable需要知道它想要渲染的行类型。

我已经尝试过使用this.props.children了，但是我一直在坚持如何从父组件设置子类的proptype。

Answer 1

也许我对你想要完成的事情感到困惑，但是你做不到这样的事情：

var topics = page.table_rows.map(function(row) {
    return row.someFlag ? <CompletedRow row={row}/> : <IncompleteRow row={row}/>;
});

Answer 2

  

我遇到了如何从父组件设置子组件的原型。

我使用React.Children和React.cloneElement来映射具有父类的正确属性的子元素。

StartupWMClass