「未分類」カテゴリーアーカイブ

Windows 10でreact-native initのエラー対処

詳しくはこちら

WIndows 10で、以下のコマンドで初期化しようとした場合に

react-native init AwesomeProject

以下のエラーになる場合がある（react-native: 0.56.0の場合）

import type {CommandT} from './commands';
^^^^^^

SyntaxError: Unexpected token import

対処としては前のバージョンを指定して初期化する。

react-native init --version="0.55.4" AwesomeProject

react-railsでimport

せっかくrailsでもreactでcomponent化しているのに再利用したい。

ということでreact-railsを使っている場合に他のcomponentをimportする方法のメモ。

//= require ./components/SubComponent
class MainComponent extends React.Component {
  constructor(props) {
    super(props)
  }
}

相対パスで指定。拡張子「.jsx」は省略して大丈夫でした。

react-bootstrap-tableでselect入力項目のvalueとtext

react-bootstrap-tableのselect入力項目のkey,valueを設定する方法のメモ。

editableでtype: ‘select’でvaluesを設定する方法は公式のドキュメントであるけれども、valueとtextを使う方法が記載されておらずソースを見て調査。

class Kind extends React.Component {
  constructor() {
    super()
    this.state = {
      kinds: [{value: 1, text: '種類A'}, {value: 2, text: '種類B'}, {value: 3, text: '種類C'}]
    }
  }

  render() {
    return (
      <div>
        <BootstrapTable>
          <TableHeaderColumn dataField='kind' editable={{type:'select', options: {values: this.state.kinds}}} dataFormat={}>種類</TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

key項目とか記載省略。テーブル上の表示はdataFormatなどで加工する必要があるかも。