Dziwne dzialanie tabeli w reactjs

2015-10-06T15:28:21+02:00

Rejestracja: dni
Ostatnio: dni

0

Czesc dopiero zaczynam swoja nauke piszac stronke w reactjs i juz napotkalem na problem. Pobralem sobie statycznie informacje, zwracam je za pomoca map i uzyskuje dane. No ale jest problem bo jak chce je wstawic do tabeli to ona mi sie rozjezdza na tyle, jaka jest dlugosc tekstu. Jesli zrenderuje zwykla tabele bez pobierania danych to wszystko jest okej. Probowalem tez bootstrap ale nie dziala. Po prostu td jest tak dlugie jak tekst sciaganych danych. A to moj kod.

Kopiuj

 var Show = React.createClass({
     	alert: function () {
     		console.log(this);
     	},
    	render: function () {
    		var data = [
    			{
    			name:"Janusz",
    			lastname : "Mrozinski"
    			},
    			{
    			name:"Przemyslaw",
    			lastname : "Kalarepa"
    			},
    			{
    			name:"Abdul Ahim As Satans Nius Nowas",
    			lastname : "Khana-Omi Sam"
    			}

    		]
    		var returndata = data.map(function(el,k){
    		return(
    		
    				<table>
    					<thead>
	    				<tr>
					        <th>Firstname</th>
					        <th>Lastname</th>
					    </tr>
					    </thead>
					    <tbody>
	    					<tr>
		    					 <td><Names name={el.name}></Names></td><td><Names name={el.lastname}></Names></td>
	    					</tr>
	    				</tbody>
    				</table>
    		
    		 );
    		});
 
    		return (
    		<div>
    			<div> {returndata} </div>
    		</div>
    		)
    	}
    });
 React.render(<Show/>,document.getElementById('example') );

LukeJL

2015-10-06T15:48:54+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 8488

0

Jeśli tabela ci sie rozjeżdża wizualnie pod wpływem długiego tekstu, to przypuszczam, że problem leży w CSSach, a nie w React. Próbowałeś to badać w dev toolsach?

EDIT: chyba tak widocznie działają tabele: http://jsfiddle.net/L48tv41f/ , ale co za problem to wystylować jakoś, np. tak http://jsfiddle.net/L48tv41f/1/ ?

2015-10-06T16:23:56+02:00

Rejestracja: dni
Ostatnio: dni

0

Moze faktycznie ostylowanie tego dalo porzadany efekt, ale jesli uzywam bootstrapa to nie powinno tak sie zdazyc, przeciez bootstrap jest responsywny, a jednak mi sie takie cos robilo. Wiec troche pokombinowalem i po prostu przerobilem moj kod na takie cos:

Kopiuj

	var returndata = data.map(function(el,k){
    		return( 
    			<div>
    				<tr><td><Names name={el.name}></Names></td> <td><Names name={el.lastname}></Names></td></tr>
    			</div>
    			);
    		});
 
    		return (
    		<div>
    			<table className="table">
    			 <thead>
				  <tr>
				     <th>Name</th>
				     <th>Lastname</th>
				  </tr>
				 </thead> 
				 <tbody>
    					{returndata}  
    			</tbody>
    			</table>
    		</div>
    		)

I pomoglo. Bootstrap sobie poradzilem bez zabawy w stylach.