说我有组件 A
喜欢
export default class ComponentA extends components {
render(){
return() //use componentB here?
}
}
class ComponentB extends components {
}
如何创建另一个组件并在 ComponentA 中使用它？
文件中的多个组件
IT技术
javascript
reactjs
2021-04-28 12:06:35
3个回答
如何创建另一个组件并在 ComponentA 中使用它？
有两种可能的方法：
1-在同一文件中定义组件，不需要导出该组件，因为您将在同一文件中使用该组件。
2-在另一个文件中定义组件，然后导出该组件。在这种情况下需要导入组件。
我们可以在同一个文件中创建任意数量的组件，我们可以像使用 HTML 标签div, span, p等一样使用这些组件。
例子：
ComponentB在另一个组件中使用ComponentA：
export default class ComponentA extends components {
render(){
return(
<div>
{/*other code*/}
<ComponentB /> // notice here, rendering ComponentB
</div>
)
}
}
ComponentB在同一个文件中定义如下：
class ComponentB extends components {
}
ComponentB在另一个文件中这样定义：
export default class ComponentB extends components {
}
像其他任何组件一样使用它：
export default class ComponentA extends components {
render() {
return <ComponentB />; // Use ComponentB here
}
}
class ComponentB extends components {
render() {
return <div>I'm B</div>;
}
}
例子：
是的，你在正确的轨道上。
export default class ComponentA extends React.Component {
render(){
return(<ComponentB />);
}
}
class ComponentB extends React.Component {
render() {
return (<h1>Hello world! This is Component B</h1>)
}
}
或者更好的是，stateless components像这样使用：（如果它是一个非常愚蠢的组件）
const ComponentB = () => (<h1>Hello world! This is Component B</h1>);