Javascript 文件中的多个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44128959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple components within a file
提问by Alan Jenshen
Says I have component A
说我有组件 A
like
喜欢
export default class ComponentA extends components {
render(){
return() //use componentB here?
}
}
class ComponentB extends components {
}
how can I create another component and use it within ComponentA?
如何创建另一个组件并在 ComponentA 中使用它？
采纳答案by Mayank Shukla
How can I create another component and use it within ComponentA?
如何创建另一个组件并在 ComponentA 中使用它？
There are two possible ways of doing that:
有两种可能的方法：
1-Define the component in the same file, exporting of that component will be not required because you will use that component in the same file.
1-在同一文件中定义组件，不需要导出该组件，因为您将在同一文件中使用该组件。
2-Define the component in another file then export that component. Importing of component will be required in this case.
2-在另一个文件中定义组件，然后导出该组件。在这种情况下需要导入组件。
We can create as many components as we want in the same file, and we can use those components in the same way as we use HTML tags div, span, petc.
我们可以在同一个文件中创建任意数量的组件，我们可以像使用 HTML 标签div, span, p等一样使用这些组件。
Example:
例子：
Using ComponentBinside another component ComponentA:
ComponentB在另一个组件中使用ComponentA：
export default class ComponentA extends components {
render(){
return(
<div>
{/*other code*/}
<ComponentB /> // notice here, rendering ComponentB
</div>
)
}
}
Define ComponentBin same file like this:
ComponentB在同一个文件中定义如下：
class ComponentB extends components {
}
Define ComponentBlike this in another file:
ComponentB在另一个文件中这样定义：
export default class ComponentB extends components {
}
回答by T.J. Crowder
Just use it, like any other component:
只需使用它，就像任何其他组件一样：
export default class ComponentA extends components {
render() {
return <ComponentB />; // Use ComponentB here
}
}
class ComponentB extends components {
render() {
return <div>I'm B</div>;
}
}
Example:
例子：
/*export default*/ class ComponentA /*extends components*/ extends React.Component {
render() {
return <ComponentB />; // Use ComponentB here
}
}
class ComponentB /*extends components*/ extends React.Component {
render() {
return <div>I'm B</div>;
}
}
ReactDOM.render(
<ComponentA />,
document.getElementById("react")
);<div id="react"></div>
<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>回答by ickyrr
Yes, you are in the right track.
是的，你在正确的轨道上。
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>)
}
}
or better yet, use stateless componentslike so: (if it's a really dumb component)
或者更好的是，stateless components像这样使用：（如果它是一个非常愚蠢的组件）
const ComponentB = () => (<h1>Hello world! This is Component B</h1>);
