Reactjs 调用组件的不同方式

我有一个更具理论性的问题

我有这个组件

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

class SearchTable扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const{i18n}=this.props；
常量结果=（道具）=>{
console.log（'login props'）
if（this.props.versions.length）{
返回(
this.props.versions.map（版本=>(
版本栏
))
);
}
返回（hola）；
};
返回(
福
);
}
}

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

如果我把代码改成这个

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

class SearchTable扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const{i18n}=this.props；
常量结果=（道具）=>{
console.log（'login props'）
if（this.props.versions.length）{
返回(
this.props.versions.map（版本=>(
版本栏
))
);
}
返回（hola）；
};
返回(
福
{Results（）}
);
}
}

正在渲染结果组件

---

有什么不同？我曾经使用过该方法，它工作正常，这是因为您试图在另一个组件中定义一个react组件。可以这样做，但需要使其成为类的静态属性

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

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

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

---

然后，您只需将其渲染为普通组件，这是因为您试图在另一个组件中定义一个react组件。可以这样做，但需要使其成为类的静态属性

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

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

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

---

然后，您只需像渲染普通组件一样渲染它。

问题：-结果组件在渲染方法中定义。这就是为什么，你需要把它叫做函数

解决方案：-将结果组件定义为类的成员函数，然后可以将其称为

或在类SearchTable之外定义此函数并将其称为

在类外定义函数组件是一种很好的做法，这样也可以从其他组件调用它

希望这有帮助

---

干杯

问题：-结果组件在渲染方法中定义。这就是为什么，你需要把它叫做函数

解决方案：-将结果组件定义为类的成员函数，然后可以将其称为

或在类SearchTable之外定义此函数并将其称为

在类外定义函数组件是一种很好的做法，这样也可以从其他组件调用它

希望这有帮助

干杯