React 组件不显示

Question

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

addRecipe (recipe) {//add new fish to recipes
var timestamp = (new Date()).getTime();
this.state.recipes['recipe'+timestamp] = recipe;
this.setState({ recipes : this.state.recipes });
}
componentWillMount(){
  this.setState({
  recipes : require('./sample-recipes')
});
}
render() {
return (
  <div className="App">
  <h2>Welcome to the Recipe Book</h2>
   <button> {/*onClick, how to call Addrecipe here.*/ }
    Add Recipe
   </button>
   <AddRecipe addRecipe={this.addRecipe}/>
   <div>{this.state.recipes}</div>
  </div>
  );
 }  
 }

var AddRecipe = React.createClass({
create : function(event) {
event.preventDefault();
var recipe = {
  name : this.refs.name.value,
  ingredients:this.refs.ingredients.value
}

this.props.addRecipe(recipe);
this.refs.form.reset();
},
render : function() {
return (
  <form className="add" ref="form" onSubmit={this.create}>
  <span> Recipe <input type="text" ref="name" placeholder="Recipe Name"/>          

 </span>
   <span>Ingredients <input type="text" ref="ingredients"               

 placeholder="ingredients" /></span>       
    <button type="submit">Add</button>
    <button type="submit">Cancel</button>
  </form>
  )
  }
  });
  export default App;

我正在用 reactjs 构建这本食谱书（我已经开始学习 react）。

1) 如何在页面加载时显示文件 sample-recipes.js 中的所有食谱。为什么在写入 {this.state.recipes} 时不显示文件中的所有食谱。

2) 我应该如何在单击按钮（添加配方）时调用 AddRecipe 组件。

Answer 1

1) Recipes 应该是一个数组，您必须将其映射到 return html 或内部每个对象的另一个组件。首先，您必须将当前状态结构更改为如下所示：

componentWillMount(){
  this.setState({
    recipes : [{
      //include timestamp here, I created example recipe to get it to work
      name : 'Tomato',
      ingredients:'Just Tomato'
    }]
  });
}

然后在 addRecipe 函数中，您必须将下一个配方添加到数组中，并且 您不能在构造函数外部使用 this.state.sth:

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

当然，您可以尝试映射对象，但使用数组更容易。

现在您可以这样显示食谱了：

<ul>
  {this.state.recipes.map(recipe => {
    return <li>{recipe.name}</li>
  })}
</ul>

2) 您需要另一个状态变量，例如 displayAddRecipeForm。然后绑定一个将状态更改为相反的函数：

<button onClick={() => {this.setState({ displayAddRecipeForm: !this.state.displayAddRecipeForm })}}>Add Recipe</button>

将状态作为属性传递给 AddRecipe 组件，并根据道具设置类名：

<form className={this.props.display ? '' : 'hide'}  ref="form" onSubmit={this.create}>

React 组件不显示

React components does not display

jsx

reactjs