Reactjs 在react中将值从一个组件传递到另一个组件

container.js-

//Here we render the recipe details and display add recipe form.   
import React, { Component } from 'react';
import './App.css';
import AddRecipe from './addrecipe.js';

class App extends Component {
  constructor(props){
  super(props);
  this.state={ recipes :[] } 
  this.addRecipe=this.addRecipe.bind(this);
  }

addRecipe (recipe) {
this.setState({ 
  recipes: [...this.state.recipes, recipe]
});
}

componentWillMount(){
this.setState({
  recipes : require('./sample-recipes')
});
} 

home(e){
 window.location='/a';
}

render() {
  return (
   <div className="App">
   <h2>Welcome to the Recipe Book</h2>
   <dl>
   {this.state.recipes.map(recipe => {
    return ( <div key={recipe.name} onClick={this.home}>
      <dt>{recipe.name}</dt>
      <dd>{recipe.ingredient}</dd>
      <div><img src='{recipe.image}' className="image"/></div>
      <hr></hr>
      </div>
      )
  })
 }
 </dl>
 <button className="addButton" onClick={() => 
  {this.setState({ display: !this.state.display })}}>
  Add Recipe
  </button>
  <AddRecipe addRecipe={this.addRecipe} 
  display={this.state.display} />
  </div>
  );
 }
}

export default App;

//这里我们呈现配方详细信息并显示添加配方表单。
从“React”导入React，{Component}；
导入“/App.css”；
从“./AddRecipe.js”导入AddRecipe；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={recipes:[]}
this.addRecipe=this.addRecipe.bind（this）；
}
添加配方（配方）{
这个.setState（{
食谱：[…this.state.recipes，recipe]
});
}
组件willmount（）{
这是我的国家({
配方：要求（“/样本配方”）
});
} 
主页（e）{
window.location='/a'；
}
render（）{
返回(
欢迎来到食谱
{this.state.recipes.map（recipe=>{
报税表（
{recipe.name}
{配方.配料}

)
})
}
{this.setState（{display:！this.state.display}）}>
添加配方
);
}
}
导出默认应用程序；

在home函数中，它将页面指向（'/recipe'），即文件store.js

import React, { Component } from 'react';
import AddRecipe from './addrecipe.js';

var StorePicker = React.createClass({
  render : function() {
  return (
   <form className="store-selector">
    <h2>{recipe.name}</h2> --->//gives error recipe is not defined.
    </form>
   )
 }
 });

export default StorePicker;

import React，{Component}来自'React'；
从“./AddRecipe.js”导入AddRecipe；
var StorePicker=React.createClass({
render:function（）{
返回(
{recipe.name}-->//未定义错误配方。
)
}
});
导出默认存储选择器；

---

如何在（'/recipe'）给定的新页面中显示recipe.name、配料和图像。还有另一个文件addrecipe.js，它创建一个表单以获取用户的输入

这是我的index.js文件--

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“/AddRecipe”导入AddRecipe；
从“./store”导入StorePicker；
从“./container”导入应用程序
var ReactRouter=require（'react-router'）；
var Router=ReactRouter.Router；
var Route=ReactRouter.Route；
var-Navigation=ReactRouter.Navigation；
从“历史记录/createBrowserHistory”导入createHistory
变量路由=(
);
render（routes，document.getElementById（'root'）；

看看react“道具”，您的路由器使用的是什么？您可以将

id

作为参数传递，然后使用该id进行api调用以获取配方数据。或者，如果您正在使用redux或某些状态管理，则需要从它们的。需要更多关于你的项目的信息。我正在使用react路由器。我应该在哪里传递参数？这是index.js文件---

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AddRecipe from './addrecipe';
import StorePicker from './store'; 
import App from './container'

var ReactRouter = require('react-router');
var Router  = ReactRouter.Router;
var Route = ReactRouter.Route;
var Navigation = ReactRouter.Navigation;
import createHistory from 'history/createBrowserHistory'

var routes = (
  <Router history={createHistory()}>
    <switch>
        <Route exact={true} path="/recipe" component={StorePicker} />
        <Route exact={true} path="/" component={App}/>
    </switch>
 </Router>
    );

  ReactDOM.render(routes, document.getElementById('root'));