使用React JS显示/隐藏（子）列表项

Question

在React JS组件中，我正在渲染一个项目列表（食谱），使用来自数组的JS映射函数，从应用程序父组件传入。每个项目都有一个子列表（配料），同样使用地图功能呈现。

我想要的是，当你点击菜谱标题时，显示/隐藏配料的子列表。我在标题上使用了onClick函数，将CSS设置为显示none或block，但出现以下错误：

无法读取未定义的属性openRecipe

这是我的代码：

var App = React.createClass({


  getInitialState(){

    return{

      showModal:false,


      recipeKeys: [ ],

      recipes: [ ]

    }


  },

  addRecipeKey: function(recipe){


    var allKeys = this.state.recipeKeys.slice();

    var allRecipes = this.state.recipes.slice();

    allKeys.push(recipe.name);

    allRecipes.push(recipe);

    localStorage.setObj("recipeKeys", allKeys);


    this.setState({recipeKeys: allKeys, recipes: allRecipes}, function(){

      console.log(this.state);


    });


  },

  componentDidMount: function(){

    var dummyRecipes = [

      {
        "name": "Pizza",

        "ingredients": ["Dough", "Tomato", "Cheese"]

      },

      {
        "name": "Sushi",

        "ingredients": ["Rice", "Seaweed", "Tuna"]

      }

    ]


    if(localStorage.getItem("recipeKeys") === null){

        localStorage.setObj("recipeKeys", ["Pizza", "Sushi"]);

        dummyRecipes.forEach(function(item){

        localStorage.setObj(item.name, item);  

        });    

        this.setState({recipeKeys: ["Pizza", "Sushi"], recipes: dummyRecipes}, function(){

          console.log(this.state);

        });


    } else {

      var recipeKeys = localStorage.getObj("recipeKeys");

      var recipes = [];

      recipeKeys.forEach(function(item){

        var recipeObject = localStorage.getObj(item);

        recipes.push(recipeObject);

     });


     this.setState({recipeKeys: recipeKeys, recipes: recipes}, function(){

       console.log(this.state);

     });



    }


  }, 


  open: function(){


    this.setState({showModal:true});

  },

    close: function(){


    this.setState({showModal:false});

  },

  render: function(){

    return( 

      <div className="container">
        <h1>Recipe Box</h1>
        <RecipeList recipes = {this.state.recipes} />
        <AddRecipeButton openModal = {this.open}/>
        <AddRecipe closeModal = {this.close} showModal={this.state.showModal} addRecipeKey = {this.addRecipeKey}/>
      </div>

    )  

  }


});

var RecipeList = React.createClass({


  openRecipe: function(item){


    var listItem = document.getElementById(item);

    if(listItem.style.display == "none"){

        listItem.style.display = "block";

    } else {

      listItem.style.display = "none";      
    }    

   },

  render: function(){    

   return (

      <ul className="list-group">

        {this.props.recipes.map(

          function(item,index){

            return (

              <li className="list-group-item" onClick={this.openRecipe(item)}> 
                <h4>{item.name}</h4>
                <h5 className="text-center">Ingredients</h5>
                <hr/>
                <ul className="list-group" id={index} >
                {item.ingredients.map(function(item){

                  return (
                    <li className="list-group-item">  
                    <p>{item}</p>
                     </li>  
                  )

                })} 
                </ul>  
              </li>  

            )

          }


        )


        }

      </ul>  


    ) 


  } 


});

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

另外，我试图在这里使用CSS方法，但也许有更好的方法来使用React？

有人能帮我吗？谢谢

Answer 1

您还可以使用类似以下内容：

  render: function(){    
   var self = this;
   return (
      <ul className="list-group">
        {this.props.recipes.map(
          function(item,index){
            return (
              <li className="list-group-item" onClick={self.openRecipe(item)}>.....

Answer 2

您的问题是您正在地图中丢失此上下文。。。您需要将.bind（this）添加到map函数的末尾

{this.props.recipes.map(function(item,index){...}.bind(this))};

我在这里回答了另一个非常类似的问题。如果您可以使用箭头函数，它会自动绑定，这是最好的。如果您不能做到这一点，那么可以使用一个bind，或者为您在map函数中使用的this上下文创建一个shadow变量。

现在是清理部分。你需要稍微整理一下你的代码。

var RecipeList = React.createClass({
  getInitialState: function() {
    return {display: []};
  },
  toggleRecipie: function(index){
    var inArray = this.state.display.indexOf(index) !== -1;

    var newState = [];
    if (inArray) { // hiding an item
        newState = this.state.display.filter(function(item){return item !== index});
    } else { // displaying an item
        newState = newState.concat(this.state.display, [index]);
    }
    this.setState({display: newState});
  },
  render: function(){
   return (
      <ul className="list-group">
        {this.props.recipes.map(function(item,index){
            var inArray = this.state.display.indexOf(index) !== -1;
            return (
              <li className="list-group-item" onClick={this.toggleRecipie.bind(this, index)}> 
                <h4>{item.name}</h4>
                <h5 className="text-center">Ingredients</h5>
                <hr/>
                <ul className="list-group" id={index} style={{display: inArray  ? 'block' : 'none'}} >
                {item.ingredients.map(function(item){
                  return (
                    <li className="list-group-item">  
                    <p>{item}</p>
                     </li>  
                  )
                }.bind(this))} 
                </ul>  
              </li>  
            )
          }.bind(this))
        }
      </ul>  
    ) 
  } 
});

这可能有点复杂，您可能不想管理一个标记列表来切换成分视图。我建议您为您的代码制作组件，这样它更以反应为中心，并且更容易切换视图。

我将用ES6语法写这篇文章，因为你应该使用ES6。

const RecipieList = (props) => {
    return (
        <ul className="list-group">
            {props.recipes.map( (item,index) => <RecipieItem recipie={item} /> )
        </ul>  
    );
};

class RecipieItem extends React.Component {
    constructor(){
        super();
        this.state = {displayIngredients: false}
    }
    toggleRecipie = () => {
        this.setState({displayIngredients: !this.state.displayIngredients});
    }
    render() {
        return (
            <li className="list-group-item" onClick={this.toggleRecipie}> 
                <h4>{item.name}</h4>
                <h5 className="text-center">Ingredients</h5>
                <hr/>
                <ul className="list-group" style={{display: this.state.displayIngredients  ? 'block' : 'none'}} >
                    {this.props.recipie.ingredients.map( (item) => <IngredientItem ingredient={item} /> )} 
                </ul>  
            </li>
        );
    }
}

const IngredientItem = (props) => {
    return (
        <li className="list-group-item">  
            <p>{props.ingredient}</p>
        </li>
    );
};