Question

我使用antd作为我的UI框架。我试图从类外部调用在Class中声明的函数，我该怎么做？

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>
        );
    }

错误：＆＃39;的ShowModal＆＃39;未定义no-undef

我尝试将其更改为：

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

但我仍然遇到同样的错误。

我已经添加了渲染功能以显示更广泛的背景。

Answer 1

我通过简单地将const移动到Class中并将其作为this.columns []引用来解决这个问题。然后我就能照常完成剩下的工作了。

感谢您的帮助！

Answer 2

您应该创建一个接受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>;
            }
        }
    ]
}

在render（）中：

<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

您所能做的就是为您希望访问的组件设置一个引用，然后使用该引用来调用该函数。粗略的例子：

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

    this.setRef = element => { this.element = element; };
  }

  render() {
    return (
      <div>
        <Child ref={this.setRef} />
        <p>{this.element.getText()}</p>
      </div>
    );
  }
}

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

    this.state = {
      text: 'hello world',
    };

    this.getText = this.getText.bind(this);
  }

  getText() {
    return this.state.text;
  }

  render() {
    return (
      <div>Child</div>
    );
  }
}

Answer 4

将函数声明为static。

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

ReactJS - 来自课外的调用函数

4 个答案: