Question

我正在学习React，并且想要创建一个以Symfony4作为我的后端和React前端的应用程序。现在，当我需要从后端将某种数据传递到前端时，我陷入了困境。我真的不知道正确的方法是什么？在完成一些教程之后，我是这样做的：

我从控制器将一些数据发送到树枝文件：

/**
 * @Route("/")
 */
public function homepage()
{
    $date = new DateTime();
    $curr_date = $date->format('Y-m-d H:i:s');

    return $this->render('base.html.twig', [
        'gameDate' => $curr_date
    ]);
}

在树枝文件中，将其设置为数据属性

base.html.twig：

<div id="root" data-event-date="{{ gameDate }}">

然后我可以在JavaScript中将变量作为数据集获取

App.js：

const root = document.getElementById('root');

ReactDOM.render(<Homepage {...(root.dataset)}/>, root);

并通过道具进行渲染。

Homepage.js：

class Homepage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            prizePool: '',
            gameDate: '',
            numberOfPlayers: '' 
        }
    }

    onParticipateClick = (event) => {
        this.setState({prizePool: Math.random()})
    }

    render()
    {
        return (
            <div className="mt-c-10">
                 <GameInfoBox gameDate={this.props.eventDate}/>
            </div>
        )
    }
}

这实际上有效，但是我担心在数据变量中显示所有信息，因为任何人都可以看到它。如果我想传递用户ID或机密信息怎么办？应该有另一种方法做对了吗？

Answer 1

这取决于您的尝试，如果您正在处理大型项目，则可以使用API来提供后端数据。在这里看看：https://www.modernjsforphpdevs.com/react-symfony-4-starter-repo/。有一个简单的例子。

但是，如果您需要更多功能，请使用api平台或FOSRestBundle。

Symfony4后端与前端反应。最佳和最安全的信息传递方式？

1 个答案: