文件中的多个组件

Question

说我有组件A.

喜欢

export default class ComponentA extends components {
   render(){
      return() //use componentB here?
   }
}

class ComponentB extends components {

}

如何在ComponentA中创建另一个组件并使用它？

Answer 1

只需使用它，就像任何其他组件一样：

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

Answer 2

如何在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 {

}