我遇到过很多关于如何进行Component嵌套的资料。但是，每当我尝试Component在另一个内部创建一个时，Component我的代码都会失败。
class parent extends React.Component{
class child extends React.Component{
render(){
return <div><h1>Hiiii</h1></div>;
}
}
render(){
return <div><DEF /></div>;
}
}
你不能那样做。您可以在同一个文件（不是同一个组件）上执行此操作
class DEF extends Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
export default class ABC extends Component {
render() {
return (
<div>
<DEF />
</div>
);
}
}
你不能在另一个类中定义类，我不明白你为什么想要。
在 React 中，您可以通过两种方式定义组件：有状态组件（类）或功能组件（函数）。只有当您需要在本地管理状态时才应使用有状态组件。
您可以执行以下操作：
export default class MyStatefulComponent extends Component() {
render() {
return (
<div><MyFunctionalComponent {...this.props} /></div>
)
}
}
function MyFunctionalComponent(props) {
return <h1>I am functional</h1>
}
我已经使用扩展运算符将props从有状态组件传递到功能组件，但您可能应该根据需要传递单个props。
组件嵌套意味着在其他组件中渲染 react 组件。喜欢
<ParentComponent property={value}>
<div>
<ChildComponent />
...
</div>
</ParentComponent>
这就是您可以实现您正在尝试做的事情的方式。
class ABC extends React.Component {
render() {
class DEF extends React.Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
return (
<div>
<DEF />
</div>
);
}
}