Первая таблица React JS
Здравствуйте, я новичок в react js, и я хочу создать простую таблицу без подключения к базе данных. Я создаю что-то подобное, но не знаю, как создавать имена столбцов. Smb умеет творить?
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id": 1,
"name": "Foo",
"age": "20"
},
{
"id": 2,
"name": "asdas",
"age": "30"
},
{
"id": 3,
"name": "fgdf",
"age": "40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person}/>)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
var myStyle = {
fontSize: 20,
color: '#2aa445'
}
return (
<div>
<h1 style = {myStyle}>Person Table</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
Этот код показывает только чистый текст, а не столбцы и строки таблицы: / Это может быть что-то простое.
вам также следует добавить заголовок таблицы, например: "<th> </th>",
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужен тег заголовка столбца таблицы
<th>Col name 1</th>
Вот пример
Вы имеете в виду? {this.state.data.map ((person, i) => RETURN (<TableRow key = {i} data = {person} />))}. Для стрелочных функций это не обязательно. Но рад, что вы просмотрели мой пример
Вы имеете ввиду this.props.data.id? Нет, вы не можете определять конструктор, и this.props будет доступен автоматически
вы не используете какой-либо фреймворк, поэтому вы не можете видеть границу ячейки aur в своих данных, вы можете использовать css, чтобы добавить настраиваемую границу так же, как ответ @theJuls, или вы можете использовать фреймворк начальной загрузки, который даст вам вид таблицы по умолчанию.
Вопрос был не в виде таблицы, а в заголовке таблицы.
Затем проверьте мой ответ, чтобы добавить заголовок таблицы, мы используем <thead>, а для добавления столбца в заголовок таблицы добавить <th>
Не проблема. Сделанный
Таблицы в оригинальном ReactJS такие же, как и в HTML. Глянь сюда
Имена столбцов создаются с помощью тега th. Для этого вам также понадобится строка (tr). В вашем случае код будет выглядеть примерно так:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
</table>
Поэтому для этого вам нужно добавить свои собственные стили, чтобы отображать границы и все остальное.
В частности, для вашего случая я бы сказал, что в тегах table и td вам необходимо добавить стиль границы:
table, td {
border: 1px solid black;
}
Однако это сделает весь контент немного плотным внутри границы, поэтому также добавьте им отступ:
td {
padding: 10px
}
Обновлено: вот лучшая версия вашей таблицы:
class App extends React.Component {
render () {
return (
<div>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>this.props.data.id</td>
<td>this.props.data.name</td>
<td>this.props.data.age</td>
</tr>
</table>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);table, td, th {
border: 1px solid black;
}
td {
padding: 10px
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "app"></div>Вы можете сделать это таким образом, это самый простой способ динамического создания таблицы. Если вы хотите добавить больше столбцов, добавьте также такое же количество td. и если вы хотите добавить стиля к своей таблице, пожалуйста, посмотрите Таблица начальной загрузки
<table>
<thead>
<tr>
<th>
COLUMN NAME
</th>
</tr>
</thead>
<tbody>
{
data.map((item,index)=>{
return(<td key = {index} > {item} </td>)
})
}
</tbody>
</table>
Вы создаете заголовки таким же образом: вы выясняете имена и либо кодируете их вручную, либо помещаете их в коллекцию и выполняете итерацию, создавая строку для заголовков и
<th>для каждого заголовка.