React.Componentでclassを付与する時の注意点

React.Componentのrenderメソッドを使ってDOMを表示する時がある。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

ここで、htmlタグにclass属性を追加したい場合、一つ注意点がある。

それは、classとそのままではなく、classNameと書く必要があるということ。

// NGパターン
class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div class="foo">Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

// OKパターン
class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div className="foo">Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

参考

reactjs.org