顯示陣列反應

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

    addRecipe (recipe) { 
    console.log({...recipe}) 
     this.setState({ 
     recipes: [...this.state.recipes, recipe] 
    }); 
    } 
    componentWillMount(){ 
    this.setState({ 
     recipes : require('./sample-recipes') 
    }); 
    } 
    render() { 
    return (
     <div className="App"> 
     <h2>Welcome to the Recipe Book</h2> 
     <dl> 
     {this.state.recipes.map(recipe => { 
     return (<div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       <dd>{recipe.ingredient}</dd> 
       <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> 
    ); 
    } 

}

我的採樣recipe.js文件如下顯示陣列反應

module.exports = [ 
{ 
name : 'chicken', 
ingredient : ['spinach','chillies'] 
    }];

如何顯示通過空間或逗號分隔的成分。現在它顯示爲「spinachchillies」。這是製作成分數組的正確方法嗎？

來源

2017-04-09 sugandh goyal

我也想學反應......是什麼涵蓋所有重要主題的最佳來源... –

由於活性成分是array of strings可以join它來創建一個字符串，並顯示結果

{this.state.recipes.map(recipe => { 
     return (<div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       <dd>{recipe.ingredient.join(",")}</dd> 
       <hr></hr> 
       </div> 
       ) 
     }) 
    }

來源

2017-04-09 17:42:10

這也顯示了連接不是一個功能。每當我用AddRecipe組件添加一個新配方時 –

要麼你可以使用地圖也，就像這樣：

{ 
    this.state.recipes.map(recipe => { 
     return ( 
      <div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       { 
        recipe.ingredient && recipe.ingredient.map(el => <dd key={el}> {el} </dd>) 
       } 
       <hr></hr> 
      </div> 
     ) 
    }) 
}

或參加使用,，如下所示：

<dd> {recipe.ingredient.join(',')} </dd>

選中該工作示例：

let data = [ 
 
{ 
 
    name : 'chicken', 
 
    ingredient : ['spinach','chillies'] 
 
}];  
 
    
 
class App extends React.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 : data 
 
     }); 
 
    } 
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <h2>Welcome to the Recipe Book</h2> 
 
     <dl> 
 
     {this.state.recipes.map(recipe => { 
 
      return (<div key={recipe.name}> 
 
       <dt>{recipe.name}</dt> 
 
       <dd>{recipe.ingredient.join(',')}</dd> 
 
       <hr></hr> 
 
       </div> 
 
       ) 
 
      }) 
 
     } 
 
     </dl> 
 
     
 
     Add Recipe 
 
     <AddRecipe addRecipe={this.addRecipe}/> 
 
     </div> 
 
    ); 
 
} 
 
} 
 

 
class AddRecipe extends React.Component{ 
 
    add(){ 
 
     this.props.addRecipe({name: this.name.value, ingredient: this.ing.value.split(',')}); 
 
    } 
 
    render(){ 
 
     return (
 
     <div> 
 
      <input ref={name=>this.name=name}/> 
 
      <input ref={ing=>this.ing=ing}/> 
 
      <input type='button' onClick={this.add.bind(this)} value='Add'/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='root'/>

來源

2017-04-09 17:42:50

這表明.map不是一個函數，只要我用AddRecipe組件添加一個新配方。 –

只需在使用地圖之前進行檢查。 –

什麼檢查？我應該怎麼做？ –

您可以使用如果表達或三元操作：

<span> 
    { 
     testArray.length ? testArray.map((itemTestArray) => 
     (<span> {itemTestArray} </span>)) : '-' 
    } 
</span>

來源

2017-10-29 11:13:47

顯示陣列反應

回答

相關問題