我如何创建另一个组件并将其用于PwentA中？
有两种可能的方法：

**1-**在同一个文件中定义组件，不需要导出该组件，因为您将在同一个文件中使用该组件。
**2-**在另一个文件中定义组件，然后导出该组件。在这种情况下，将需要更换组件。

我们可以在同一个文件中创建任意多的组件，并且可以像使用HTML标记div, span, p等一样使用这些组件。

示例：

在另一个组件ComponentA中使用ComponentB：

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 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>

是的，你在正确的轨道上。

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>);

如果你想在一个文件中使用多个组件，并在另一个文件中使用。分别创建和导出它们。

export const FirstComponent = () => {
return <h1>First Component</h1>;
};

export const SecondComponent = () => {
return <h1>Second Component</h1>;
};

在Main.js文件中

import { FirstComponent, SecondComponent } from "./ManyComponent.js";
export default function App() {
return (
<div className="App">
  <FirstComponent/>
  <SecondComponent/>
</div>
);
}

如果你想在同一个文件中使用组件。在Main.js文件中

export default function App() {
return (
<div className="App">
<FirstComponent/>
</div>
);
}
const FirstComponent = () => {
return <h1>First Component</h1>;
};