javascript - 如何正确创建和渲染功能组件？

Question

我正在尝试使用 the instructions here 创建和渲染功能组件作为基地。根据我在那里收到的信息，我应该能够做一些类似的事情:

class MyComponent extends React.Component {
   render() {
     return (
       <div>
         <OtherComponent props="test" />
       </div>
   )}
   function OtherComponent(props) {
    return (
      <div>
        test
      </div>
    );
   }
}

但这会引发错误:

Unexpected token:    function OtherComponent(props) {
                          ^

我发现一些帖子建议删除函数，所以我尝试了，但随后它抛出了错误:

OtherComponent is not defined

我可以通过创建一个单独的类组件来使其工作，如下所示:

class OtherComponent extends React.Component {
   render() {

但这不是我想做的。在 React.js 中创建/渲染功能组件的正确方法是什么？

Answer 1

例如这个就可以了。请参阅文档；) React - Composing Components

function OtherComponent(props) {
  return <div>test</div>;
}

class App extends React.Component {
  render() {
    return (
      <div>
        <OtherComponent props="test" />
      </div>
    );
  }
}