Question

我希望在我的申请中执行以下操作： 1）从每个对象访问颜色和选项的属性 2）检查财产 3）根据该属性给出一个类 4）切换课程onClick

json对象看起来像这样{

{
        "green": false,
        "other": "third",
        "option" : 2
    },
    {     
        "green": false,
        "other": "third",
        "option": 1
    },
    {
        "green": true,
        "other": "first",
        "option": 5
    }

依旧...... 每个对象将返回一个密钥的数字（[0]，[1]等）。

我的React代码如下：

class Inf extends React.Component {
    constructor() {
      super();
      this.state = {
        colorData: data
      }
    }
    renderList(data){
      return(
        <ul>{Object.keys(this.state.colorData).map(thing =><li>{thing}</li>)}</ul>
      )
    }
    render() {
      console.log(this.state.colorData)
      return (
        <div>
        <div>{this.renderList(this.state.colorData)}</div>
        </div>
      );
    }
  }
  ReactDOM.render(
    <Inf />,
    document.getElementById('root')
  );

Answer 1

听起来你可以使用这个库：classnames

自述文件的“使用”部分解释得非常好，但基本上您可以使用它来执行以下操作： const classes = classNames({ classA: colorData.green, classB: colorData.red }) 基本上，如果右侧的表达式为true，则仅应用左侧的className。然后，您可以将classes分配给react className prop

Answer 2

在renderList功能中，您可以使用li设置地图返回的className={desiredClass}样式。

我的问题中有两个我不确定的变量：

您在对象中存储颜色的键
如何根据此颜色确定要添加的类

我假设您使用.color，然后使用函数classBasedOnColor根据此颜色应用类名。您还可以使用带有颜色键和类名值的字典。

看起来像这样：

<ul>{Object.keys(this.state.colorData).map(thing=>{
  const color = this.state.colorData[thing].color;
  const desiredClass=classBasedOnColor(color);
  return <li className={desiredClass}>{thing}</li>
})}</ul>

在React中基于对象属性改变类

2 个答案: