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) {
                          ^

我发现了一些建议删除function的帖子，所以我尝试了一下，但随后引发了错误：

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

Answer 2

尝试一下

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

   render() {
     return (
       <div>
         {this.OtherComponent("test")}
       </div>
   )}

}

Answer 3

您不能在另一个组件内部定义一个组件。功能组件意味着该组件是从函数创建的，而不是类。它不能具有自己的状态，因为状态是在类构造函数中初始化的。查看这篇文章以获取更多信息https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

getCount(): Observable<number> {
    const url = `${this.baseUrl}`;
    return this.http.head(url, {observe: 'response'})
      .pipe(
        map((event: any) => {
          if (event instanceof HttpResponse) {
            return +event.headers.get('header-name');
          }
          return 0;
        }),
      );
  }

Answer 4

这是另一种方式。在渲染函数中声明组件是不正确的。如果仅在父组件中使用它，为什么不使它显式并使用静态

class MyComponent extends React.Component {
  static myOtherComponent = (props) => <div>{'test'}</div>

render(){
  return(
    <div>
      <MyComponent.myOtherComponent  {props} />
    </div>
  )
}

myOtherComponent行为完全由它获得的道具控制，它没有自己的状态。

或者您可以将其作为单独的组件，例如

export default myOtherComponent  = (props) => ()

并将其导入MyComponent。请注意，现在有了钩子（请参阅React Docs），您可以使用钩子来模拟功能组件中的状态等，后一种方法可能是最干净，最灵活的方法。

Answer 5

这样，您可以定义功能组件

class Request
{
    public Amount amount { get; set; }
    public AdditionalData additionalData { get; set; }
}

class Amount
{
    public string currency { get; set; }
    public decimal value { get; set; }
}

class AdditionalData
{
    [JsonProperty("payment.token")]
    public string applePayToken { get; set; }
}

现在您可以在App中使用功能组件（类组件），如下所示

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

如何正确创建和呈现功能组件？

5 个答案: