在Rails控制器中将数据传递到React组件可以通过以下步骤实现:
下面是一个示例代码:
在Rails控制器中:
class UsersController < ApplicationController
def index
@users = User.all
end
end
在对应的视图模板中(例如index.html.erb):
<%= react_component('UserList', { users: @users }) %>
在React组件中:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('/users.json')
.then(response => {
setUsers(response.data);
})
.catch(error => {
console.error(error);
});
}, []);
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
在上述示例中,Rails控制器通过@users
实例变量将数据传递给视图模板,然后在React组件中通过Axios发送GET请求获取数据,并使用useState钩子函数存储数据。最后,在组件的返回值中使用map函数遍历数据并渲染到页面上。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云