ReactJS-从类外调用函数

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

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

但我还是犯了同样的错误

---

我还添加了渲染函数以显示更广泛的上下文。

将函数声明为静态

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

类组件A扩展了React.Component{
静态getSomething（）{
return“这是从getSomething函数返回的”；
}
render（）{
返回组件A；
}
}
类ComponentB扩展了React.Component{
render（）{
返回(
B部分
函数组件a.getSomething：
{ComponentA.getSomething（）}

);
}
}

看看这个例子：

---

您应该创建一个函数，该函数接受

showmodel

函数作为参数：

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

函数getColumns（showModal）{
返回[
{
标题：“行动”，
数据索引：“操作”，
关键：“行动”，
呈现：（文本、记录、索引）=>{
record.status==='error'&&return；
record.status==='draft'&&return；
record.status===“进度”和返回“不适用”；
返回；
}
}
]
}

在render（）中：

---

我解决了这个问题，只需将常量移动到类中，并将其称为this.columns[]。然后我就可以像平常一样做剩下的事情了

---

谢谢你的帮助

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

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

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.setRef=element=>{this.element=element；}；
}
render（）{
返回(
{this.element.getText（）}

);
}
}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文字：“你好，世界”，
};
this.getText=this.getText.bind（this）；
}
getText（）{
返回this.state.text；
}
render（）{
返回(
小孩
);
}
}

您不能。您当前的设置没有对该类实例的引用，如果您在该渲染函数中有一个this上下文，您应该检查它是否是您的

板载

类，然后您应该能够使用

this.showmodel

调用它。如果你有机会制作一个MCVEcan，你可以在你试图调用的地方添加代码，

showModal

？@Icepickle我已经添加了渲染函数以获得更多的上下文。如果我将它定义为静态，那么我可以引用“this”？*不能-拼写错误修复你是对的，你不能。。。然后另一个选项是创建类并获取实例…您能详细说明一下吗？因为我不太擅长反应，请？

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

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