Question

我还有一个理论上的问题

我有这个组件

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

结果组件正在呈现。

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

希望这会有所帮助，

干杯！

调用组件的不同方法

2 个答案: