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

Question

I'm creating a paged table and I want to be able to customize my row output.

Which looks like.

  
 
  
  
  
 
   
 
    
    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>
    	}
    });
 
   
 
  

The above code is modified but highly based off of: this .

  
 
  
  
  
 
   
 
    
    <PagedTable>
      <IncompleteRow/>
    </PagedTable>
 
   
 
  

or like

  
 
  
  
  
 
   
 
    
    <PagedTable>
      <CompletedRow/>
    </PagedTable>
 
   
 
  

As you can see. Right now I am setting incomplete row in the render method. But I want to make this component extensible. Which means I want to be able to render different kinds of rows.

The problem is that to know what rows to render I need to be in the PagedTable class as it knows which rows should currently be displayed. So my PagedTable needs to be aware of what type of row it wants to render.

I've tried playing around with this.props.children but I'm getting stuck on how to set the child's proptype from the parent component.

Answer 1

Maybe I'm confused as to what you're trying to accomplish, but couldn't you do something like:

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

Answer 2

I'm getting stuck on how to set the child's prototype from the parent component.

I use React.Children and React.cloneElement to map the child elements with correct properties from the parent class.

React.Children.map(this.props.children, function (child) {
  return React.cloneElement(child, {
    someProperty: this.props.someProperty
  });
});