显示阵列反应

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

显示阵列反应

回答

相关问题