ReactJS - クラス外から関数を呼び出す

Question

私はUIフレームワークとしてantdを使用しています。クラスの中から宣言された関数をクラス外から呼び出そうとしていますが、どうすればいいですか？

const columns = [ 
{ 
     title: 'Action', 
     dataIndex: 'action', 
     key: 'action', 
     render: (text, record, index) => { 
      if (record.status === 'error') { 
       return <a className='error-text' href="#">{text} &raquo;</a> 
      } else if (record.status === 'draft') { 
       return <a href="#" onClick={(e) => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete" /> Delete</a> 
      } else if (record.status === 'progress') { 
       return 'N/A' 
      } else { 
       return <a href="#">{text} &raquo;</a> 
      } 
     } 
] 

class OnBoard extends Component { 
    constructor(props) { 
      super(props); 
      this.state = { 
       modalVisible: false 
      } 
    } 

    showModal = (id) => { 
     console.log('i am clicking id: '+id); 
    } 

    render() { 
     return (
      <Base page={this.props.location.pathname} title="TOUR LIST"> 
       <div id="dashboard"> 
        <Table 
         style={{clear: 'both'}} 
         dataSource={this.state.data} 
         columns={columns} 
         loading={this.state.loading} 
         pagination={this.state.pagination} 
         onChange={this.handleTableChange} 
        /> 
        <Modal 
         title="Delete Tour" 
         visible={this.state.modalVisible} 
         onOk={this.handleOk} 
         okText="Confirm" 
         cancelText="Cancel" 
         onCancel={this.handleCancel} 
         > 
         <p>Please confirm you would like to delete the Tour: blablah.xls</p> 
        </Modal> 
       </div> 
      </Base> 
     ); 
    } 

エラー： 'showModal' が定義されていない無undefを、私はそれを変更しようとした

：

showModal(id){ 
    console.log('i am clicking id: '+id); 
} 

しかし、私はまだ同じエラーを得た。ありません

さらに広いコンテキストを表示するためにレンダリング機能を追加しました。

Answer 1

静的として関数を宣言します。この例では

class ComponentA extends React.Component { 
    static getSomething() { 
    return 'this is returned from getSomething function'; 
    } 
    render() { 
    return <div>Component A</div>; 
    } 
} 

class ComponentB extends React.Component { 
    render() { 
    return (
     <div> 
     <h3>Component B</h3> 
     <h4>function ComponentA.getSomething:</h4> 
     <p>{ComponentA.getSomething()}</p> 
     </div> 
    ); 
    } 
} 

ルック：

https://codesandbox.io/s/zk3m3n4zzx

Answer 2

あなたはのparamとしてshowModal機能を受け入れる関数を作成する必要があります

function getColumns (showModal) { 
    return [ 
     { 
      title: 'Action', 
      dataIndex: 'action', 
      key: 'action', 
      render: (text, record, index) => { 
       record.status === 'error' && return <a className='error-text' href="#">{text} &raquo;</a>; 
       record.status === 'draft' && return <a href="#" onClick={ e => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete"/>Delete</a>; 
       record.status === 'progress' && return 'N/A'; 
       return <a href="#">{text} &raquo;</a>; 
      } 
     } 
    ] 
} 

では（レンダリング）：

<Table 
    style={{clear: 'both'}} 
    dataSource={this.state.data} 
    columns={getColumns(this.showModal)} 
    loading={this.state.loading} 
    pagination={this.state.pagination} 
    onChange={this.handleTableChange} 
/> 

Answer 3

私はこの問題を、クラス内でconstを移動し、this.columns []として参照するだけで解決しました。私はその後、正常に残りをすることができました。

ありがとうございました！