Affichage séparée par des virgules d'éléments du tableau à Réagir

 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>
     );
     }

}

Mon sample-recipe.js le fichier se présente comme suit

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

Bonjour, je suis nouveau à Réagir.Je fais cette recette projet de livre.
Je veux afficher des ingrédients séparés par un espace ou une virgule.
Maintenant, il est affiché comme "spinachchillies".
Et est-ce une bonne manière de prendre des ingrédients d'un tableau?

je veux aussi savoir réagir... quelle est la meilleure source pour couvrir tous les sujets importants...

InformationsquelleAutor sugandh goyal | 2017-04-09

jsx reactjs

Depuis ingrédient est un array of strings vous pouvez join pour créer une chaîne et d'afficher le résultat

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

Cela montre aussi jointure n'est pas une fonction . Chaque fois que j'ajoute une nouvelle recette avec mon AddRecipe composant

InformationsquelleAutor Shubham Khatri

Vous pouvez utiliser si expression ou ternaire opérateur:

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

InformationsquelleAutor Vasyl Gutnyk

Soit vous pouvez utiliser la carte pour que, aussi, comme ceci:

{
    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>
        )
    })
}

Ou joignez le tableau à l'aide de , , comme ceci:

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

Vérifier ce travail exemple:

JS:

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'));

HTML:

<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'/>

Cette montre .la carte n'est pas une fonction à chaque fois que j'ajoute une nouvelle recette avec mon AddRecipe composant.
il suffit de mettre la vérifier, avant d'utiliser la carte.
ce chèque? Que dois-je faire pour cela?
vérifier la mise à jour de réponse, créé un exemple de solution de travail, les valeurs des ingrédients élément d'entrée doit être , séparés, exécutez l'extrait ci-dessus et cocher 🙂

InformationsquelleAutor Mayank Shukla

Carte peut être à l'intérieur de la Carte. Ex:

import React from "react";
import PropTypes from "prop-types";
import { Row, Col } from "antd";
class Servers extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
server: "Server 1",
status: "running",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 2",
status: "running",
appList: ["PL", "AM"]
},
{
server: "Server 3",
status: "warning",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 4",
status: "offline",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 5",
status: "running",
appList: ["PL", "IM"]
},
{
server: "Server 6",
status: "running",
appList: ["PL", "AM", "IM"]
},
{ server: "Server 7", status: "running", appList: ["PL"] },
{
server: "Server 8",
status: "running",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 9",
status: "running",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 10",
status: "running",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 11",
status: "running",
appList: ["PL", "AM", "IM"]
},
{
server: "Server 12",
status: "running",
appList: ["PL", "AM", "IM"]
}
]
};
}
render() {
return (
<React.Fragment>
<Row type="flex" justify="space-around" align="middle">
{this.state.items.map(item => (
<Col span={5} className="box">
<div className={["server", item.status].join(" ")}>
<ul>
<li />
<li />
<li />
</ul>
</div>
<ul className="appList">
{item.appList.map(app => (
<li>{app}</li>
))}
</ul>
<h6 className="server-name">{item.server}</h6>
</Col>
))}
</Row>
</React.Fragment>
);
}
}
Servers.propTypes = {
children: PropTypes.any
};
export default Servers;

InformationsquelleAutor Igor Modesto

Vous devez vous connecter pour publier un commentaire.