我试图做一个主要组件(在示例中,容器),它可以保持内部组件可选,在示例中是harcoded(条件设置为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/
我的想法用完了......先谢谢了。
您应该使用大写字母,将React自定义组件分配给变量。像Comp = ChildOne;
或Comp = ChildTwo
..然后只做<Comp />
来自User-Defined Components Must Be Capitalized:
当元素类型以小写字母开头时,它引用一个内置组件,如或,并导致传递给React.createElement的字符串'div'或'span'。以大写字母开头的类型,如编译为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>
您需要使用正确的语法呈现组件:<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>
)
}
}