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

Question

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

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

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

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

最简单的方法是什么？

这里是一个按钮映射函数的例子：

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

下面是colorSwatch div 的示例：

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

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

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

Answer 1

您可以将单击的按钮对象存储在状态中并使用它来呈现您的 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>}