时间戳

首页 > 解决方案 > 如何根据 defaultprops 数组中的值有条件地渲染组件？

javascript - 如何根据 defaultprops 数组中的值有条件地渲染组件？

问题描述

我有一个 ReactJSstatic defaultProps数组，用于呈现多个按钮。我希望根据单击的特定按钮有条件地生成一个文本组件。

这是一个描述Car组件的示例：

...
static defaultProps = {
   cars: [
      { type: 'hatchback', color: 'red', info: '...' },
      { type: 'sedan', color: 'blue', info: '...' },
      { type: '4x4', color: 'green', info: '...' },
   ]
}
...

假设每个“类型”字段生成一个标有 的按钮type。假设我想创建一个描绘颜色的样本 div onClick。因此，如果我单击'hatchback'按钮，则样本 div 将变为'green'or'red'或'blue'，具体取决于type所选的汽车。

最简单的方法是什么？

以下是按钮映射功能的示例：


{this.props.cars.map((car) => (
   <button>
      {car.type}
   </button>

这是colorSwatchdiv 的一个示例：

<div className={styles.colorSwatch}>{car.info}</div>

尽可能具体，问题在于文本内容而不是条件 CSS 问题。

我想知道如何有条件地设置info.

标签： javascriptreactjs

解决方案

您可以将单击的按钮对象存储在状态中并使用它来呈现您的 colorSwatch div

{this.props.cars.map((car) => (
   <button onClick={() => this.setState({clickedBtn: car})}>
      {car.type}
   </button>

const { clickedBtn } = this.state;
...
{clickedBtn && <div className={styles.colorSwatch}>{clickedBtn.info}</div>}

推荐阅读