Question

我知道如何在React中切换一个类，我知道如何使一个类处于活动状态。但是，我无法弄清楚如何将它们放在一起。

我映射我的食谱并渲染每一个。我想在点击后展开配方，然后再点击再次返回到它的自然状态。但是如果我打开了一个配方并且我在另一个配方上展开，那么它应该关闭第一个，然后展开新的配方。

这是我的整个组成部分：

state = {
    term: '',
    selectedRecipeId: 0
  }

  handleInput = (e) => {
    const { value } = e.target;
    this.setState({term: value})
  }

  expandRecipe = (recipeId) => {
    this.setState({ selectedRecipeId: recipeId })
  }

  renderExpandedView = (recipe) => {
    if (this.state.selectedRecipeId === recipe.id){
      return 'recipeContainerExpanded'
    }
    else {
      return null
    }
  }

  resetView = () => {
    this.setState({selectedRecipeId: 0})
  }

  render(){
    const { recipes } = this.props;
    const { term } = this.state;
    return (
      <div>
        <h1>Recipes</h1>
        <button onClick={this.resetView}>Reset View</button>
        <input onChange={this.handleInput} />
        <div className="recipesContainer">
          {recipes.filter(recipe => recipe.name.toLowerCase().includes(term.toLowerCase()) || recipe.ingredients.some(ingredient => ingredient.startsWith(term.toLowerCase()))).map((recipe, index) => (
            <div key={index} className={`recipeContainer ${this.renderExpandedView(recipe)}`}>
              <h3>{recipe.name}</h3>
              <button onClick={() => this.expandRecipe(recipe.id)}>Expand</button>
              <h4>Ingredients</h4>
              <p>{recipe.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
            </div>
          ))}
        </div>
      </div>
    )
  }

此代码将扩展配方，然后如果您单击另一个配方，它将展开该配方并关闭前一个配方。我只是想在第二次点击时添加功能，关闭该配方但我无法在不将javascript应用于每个配方的情况下如何操作。

希望有意义

Answer 1

我刚做了一个带有我的假设的演示检查链接： demo

你需要吗？或者给我更多细节来解决这个问题

Answer 2

您可以将配方提取到配方组件，并使用 shouldComponentUpdate 生命周期方法让React知道组件的输出是否不受当前更改道具的影响。

export default class Recipe extends Component {
expandRecipe = () => {
    const {onExpand, recipe, isExpanded} = this.props;

    onExpand(isExpanded ? null : recipe.id);
};

shouldComponentUpdate(nextProps) {
    const {isExpanded} = this.props;

    return isExpanded !== nextProps.isExpanded;
}

render() {
    const {recipe, isExpanded} = this.props;

    return (
        <div className={`recipeContainer ${isExpanded ? 'recipeContainerExpanded' : ''}`}>
            <h3>{recipe.name}</h3>
            <button onClick={this.expandRecipe}>Expand</button>
            <h4>Ingredients</h4>
            <p>{recipe.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
        </div>
    )
}
}

请检查demo

Answer 3

创建将负责展开的单独组件。

Expandalbe.js

class Expandable extends React.PureComponent {
constructor() {
super();
this.state = {
  isExpand: true,
  selectedRecipeId: 0,
};
this.togglePar = :: this.expandRecipe;
}
expandRecipe(recipeId) {
this.setState({
  isExpand: !this.state.isPar,
  selectedRecipeId: recipeId,
});
}
render() {
 return (
  <div>
    <h3>{this.props.name}</h3>
    <button onClick={() => this.expandRecipe(this.props.id)}>Expand</button>
    {this.state.isExpand && <div>
      <h4>Ingredients</h4>
      <p>{this.props.ingredients.map(ingredient => <p>{ingredient}</p>)}</p>
      </div>
     }
    </div>
   );
  }
}

ActualComponent

  render() {
  const { recipes } = this.props;
  const { term } = this.state;
  return (
  <div>
    <h1>Recipes</h1>
    <button onClick={this.resetView}>Reset View</button>
    <input onChange={this.handleInput} />
    <div className="recipesContainer">
      {recipes.filter(recipe => 
      recipe.name.toLowerCase().includes(term.toLowerCase()) || 
      recipe.ingredients.some(ingredient => 
      ingredient.startsWith(term.toLowerCase()))).map((recipe, index) => (
        <Expandable key={index} props... />
      ))}
    </div>
  </div>
 )
}

在React

3 个答案: