我试图做一个主组件(在示例中为Container),该示例可以使内部组件保持可选状态,但在示例中,该组件被编码(条件设置为true)。
我需要内部组件从React.Component扩展,我不能像函数一样使用它:const ChildOne = (.... )
有2个子组件,其想法是使用更多子组件。
但是,我不能,渲染内部组件时出错:
函数作为React子代无效。如果您可能会发生这种情况 返回一个Component而不是从render返回。也许你 打算调用此函数而不是返回它。
class ChildOne extends React.Component {
render() {
return (
<div>
<p> Child One </p>
</div>
)
}
}
class ChildTwo extends React.Component {
render() {
return (
<div>
<p>Child Two</p>
</div>
)
}
}
class Container extends React.Component {
render() {
let condition = true; //Just for testing purpose
let comp = null;
if (condition)
comp = ChildOne;
else
comp = ChildTwo;
return (
<main>
{comp}
</main>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<div><Container /></div>
</div>
)
}
}
https://jsfiddle.net/01L8amgs/
我没主意了……谢谢。
答案 0 :(得分:5)
您应该使用大写字母,将React自定义组件分配给变量。像Comp = ChildOne;
或Comp = ChildTwo
..然后只做<Comp />
来自User-Defined Components Must Be Capitalized:
当元素类型以小写字母开头时,它指的是 内置组件(例如或),并导致字符串“ div” 或“ span”传递给React.createElement。以a开头的类型 大写字母,例如编译为React.createElement(Foo)和 对应于在JavaScript文件中定义或导入的组件。
我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件,请将其分配给 在JSX中使用大写变量之前。
class ChildOne extends React.Component {
render() {
return (
<div>
<p> Child One </p>
</div>
);
}
}
class ChildTwo extends React.Component {
render() {
return (
<div>
<p>Child Two</p>
</div>
);
}
}
class Container extends React.Component {
render() {
let condition = true; //Just for testing purpose
let Comp = null;
if (condition) Comp = ChildOne;
else Comp = ChildTwo;
return (
<main>
<Comp />
</main>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<div>
<Container />
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
答案 1 :(得分:1)
您需要使用正确的语法呈现组件:<Comp>
而不是{comp}
这是一个有效的示例:https://jsfiddle.net/01L8amgs/2/
请注意为此更改了Container类的渲染功能
class Container extends React.Component {
render() {
let condition = false;
let Comp = null; <===== Uppercased variable name
if (condition)
Comp = ChildOne;
else
Comp = ChildTwo;
return (
<nain>
<Comp /> <===== Render as component
</nain>
)
}
}