我还有一个理论上的问题
我有这个组件
"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>
);
}
}
结果组件正在呈现。
有什么区别?我曾经使用过这种方法,并且运行正常
答案 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/>
。
在类之外定义功能组件是一种好习惯,这样也可以从其他组件中调用它。
希望这会有所帮助,
干杯!