Question

说我有组件A

喜欢

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

class ComponentB extends components {

}

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

Answer 1

如何创建另一个组件并在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 { }

Answer 2

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

export default class ComponentA extends components {
   render() {
      return <ComponentB />; // Use ComponentB here
   }
}
class ComponentB extends components {
  render() {
    return <div>I'm B</div>;
  }
}

示例：

＆＃13;

/*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")
);

＆＃13;

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

＆＃13;

Answer 3

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

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

文件中的多个组件

3 个答案: