我有一个返回 JSX 的函数,如下所示:
function struct(locals) {
return (
<View style={fieldsetStyle}>
{label}
{error}
{rows}
</View>
);
}
label, error, and rows are functions that also return JSX.
我在 ES6 类组件的 render 方法中调用了这个函数
class Component extends React.Component {
render() {
const locals = this.getLocals();
return struct(locals);
}
}
当我运行代码时,出现错误
元素类型无效:应为字符串(对于内置组件)或
类/函数(对于复合组件)但得到:对象。检查渲染
Struct
如何从 struct 函数获取结果以作为 Component 类 render 的返回值进行渲染?
最佳答案
您返回的是 React 组件,而不是 React 元素。不同之处在于元素描述了如何创建组件,而组件是实例化类。你需要 return React.createElement(Struct);
, 或 return <Struct/>
.另外,你的 locals
变量实际上是一个 props
目的。所以你的代码应该是这样的:
function struct({locals}) {
return (
<View style={fieldsetStyle}>
{label}
{error}
{rows}
</View>
);
}
class Component extends React.Component {
render() {
const locals = this.getLocals();
return <Struct locals={locals}/>;
}
}
关于javascript - 在ES6类React组件的render方法中使用返回JSX的React组件函数报错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47231559/