Question

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

}

我的sample-recipe.js文件如下

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

嗨，我是React的新手。我正在制作这个食谱书项目。我想显示以空格或逗号分隔的成分。现在它显示为＆＃34; spinachchillies＆＃34;。这是一种将成分制成阵列的正确方法吗？

Answer 1

由于成分是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>
                 )
      })
     }

Answer 2

您可以使用 if 表达式或三元运算符：

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

Answer 3

你也可以使用map，就像这样：

{
 {name: 'Colombia', code: 'CO'},
 {name: 'Comoros', code: 'KM'},
 {name: 'Congo', code: 'CG'},
...}

或者使用{ 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> ) }) }加入数组，如下所示：

检查此工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

地图可能在地图内。例如：

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;

在React中显示逗号分隔的数组元素

4 个答案: