reactjs - 如何在 React 中将静态数据从一个组件传递到另一个组件?
问题描述
我有一个计划组件,我在其中定义计划类型,然后重定向到注册组件。我希望能够在我的注册组件中显示用户选择的计划类型?
我正在尝试像这样更新状态:
export default class Plans extends Component {
constructor(props) {
super(props)
this.state = {
planType: '',
};
}
render() {
return (
<div>
<div className="billing_freq">Billed Monthly</div>
<form action="pro-invitation" method="post">
<input type="hidden" name="plan_type" value="monthly_pro" /> //I want to show this in signup
<div className="select_btn">
<input type="submit" name="submit" onClick={() => this.setState({planType: "monthly_pro"})} value="Invitation only" />
</div>
</form>
Signup: // a separate component
<label className="container"><span className="plan_name"></span> //PLAN TYPE HERE
</label>
class App extends Component {
render () {
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path='/plans' component={Plans} />
<Route exact path='/signup' component={Signup} />
</Switch>
</div>
</BrowserRouter>
解决方案
你将如何渲染注册组件?
如果来自路由,那么将有不同的方式来实现它,如果您将其用作子组件,则传递作为这样的道具 -
<SignUp planType={this.state.planType} />
并在注册组件中访问为
<label className="container"><span className="plan_name"></span>{this.props.planType}
</label>
推荐阅读
- azure-devops - 不知道如何在 Azure DevOps Server 中设置布尔工作项字段以显示 Yes/No 而不是 True/False
- java - 如何使用 websocket 客户端侦听 rest api
- bash - 除非我不调用脚本 X,否则 bash 如何不完成此循环并且只处理 1 个项目?
- php - 如何创建数组的交集类型
- javascript - 使用动态递增值创建加载条
- ruby - 如何在变量和类之间传递块
- javascript - 如何从 JS 中的外部 url 解码多维 JSON?
- java - Spring 配置文件未从 application.properties 读取值
- python - 将文本中的字母添加到字典中而无需标点符号的功能
- mysql - 错误 1005 (HY000) mySql,在小型数据库上