调用组件的不同方法

时间:2019-01-16 20:27:24

标签: reactjs

我还有一个理论上的问题

我有这个组件

"Save"

但是结果没有得到执行(我也没有得到控制台日志)

如果我将代码更改为此

class SearchTable extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { i18n } = this.props;


    const Results = (props) => {
        console.log('login props')
      if (this.props.versions.length) {
        return (
          this.props.versions.map(version => (
            <TableRow key={Math.random()} className={version.risk ? `label-${version.risk}` : 'label-none'}>
              <TableData data-title="foo">version.bar</TableData>
            </TableRow>))
        );
      }
      return (<div>hola</div>);
    };

    return (
      <Table className="andes-card">
        <TableHead>
          <TableHeader>foo</TableHeader>
        </TableHead>
        <TableBody>
            <Results />
        </TableBody>
      </Table>
    );
  }
}

结果组件正在呈现。

有什么区别?我曾经使用过这种方法,并且运行正常

2 个答案:

答案 0 :(得分:2)

之所以发生这种情况,是因为您试图在另一个内部定义一个react组件。您可以执行此操作,但是需要将其设置为类的静态属性。

 static Results = (props) => {...yourCode}

但是,最好只在组件类之外或另一个文件中定义它。

const Results = (props) => {...yourCode}
class SearchTable extends React.Component {...yourCode}

然后,您就像渲染普通组件<Results />

答案 1 :(得分:2)

问题:-结果组件在render方法中定义。因此,您需要将其作为函数调用。

解决方案:-将Result组件定义为类的成员函数,然后可以将其称为
    <this.Result/>或在SearchTable类之外定义此函数,并将其命名为
    <Result/>

在类之外定义功能组件是一种好习惯,这样也可以从其他组件中调用它。

希望这会有所帮助,

干杯!