Question

我有以下React JS组件。

export class Sample {
  render() {
    let sampleFruits = ["apple", "mango", "orange"];
    let fruits = [];
    for (let i = 0; i < sampleFruits.length; i++) {
      fruits.push(<div className="fruit">{sampleFruits[i]}</div>);
    }
    return (
      <div>
        <h1 className="hello">Hello</h1>
        <div>{fruits}</div>
        <style jsx>
          {`
            .hello {
              font-size: 18px;
              color: #f00;
            }
            .fruit {
              color: #0f0;
            }
          `}
        </style>
      </div>
    );
  }
}

在上面的代码中，样式仅应用于.hello，而.fruit没有得到样式。除了使用jsx global之外，关于样式的任何建议？

Answer 1

您可以在声明div时包括样式。

for (let i = 0; i < sampleFruits.length; i++) {
      fruits.push(<div className="fruit" style={{ color: '#0f0' }}>{sampleFruits[i]}</div>);
    }

在渲染的返回值之外查看React JS Elements

1 个答案: