首先,我来介绍php的背景知识,并且我目前正在构建一个React中的中间件,我这样做的方式将是这样的:



class Middleware extends React.Component {
  funcOne(data) {
    return data;
  }

  funcTwo(data) {
    return (
      <div>
        { data }
        <br />
        { this.funcThree('Third function') }
      </div>
    );
  }
}

class MyComponent extends Middleware {
  funcOne(data) {
    return `Rewrite of ${data}`;
  }

  funcThree(data) {
    return data;
  }

  render() {
    return (
      <div>
        { this.funcOne('First function') }
        { this.funcTwo('Second function') }
      </div>
    );
  }
}

class MySecondComponent extends Middleware {
  funcThree(data) {
    return data;
  }

  render() {
    return (
      <div>
        { this.funcOne('First function') }
        { this.funcTwo('Second function') }
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <MyComponent />
    <hr />
    <MySecondComponent />
  </div>,
  document.getElementById('root'),
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>





但是,我真的找不到关于是否执行此操作的任何文档。
那么,这是错的吗?
如果是这样,我应该怎么做呢?

最佳答案

在更新的代码中,只需为funcTwo创建一个组件并将一个prop传递给它:

function funcOne () {
  return 'First function';
}

function Two (props) {
  return (
    <div>
      Second function
      <br />
      { props.three }
    </div>
  );
}

//...

  render() {
    return (
      <div>
        { funcOne() }
        <br />
        <Two three={this.funcThree()} />
      </div>
    );
  }




我从未见过任何必须在React中使用继承的用例。就您而言,只需创建组件或简单函数即可。此外,组件也可以是普通函数:

这可以是一个组件:

function One (props) {
  return <h1>hello</h1>
}


您可以这样使用它:

<One />


或者,如果您只需要字符串,则只需编写函数:

function funcOne () {
  return 'First function';
}

function funcTwo () {
  return 'Second function';
}

// ...

  render() {
    return (
      <div>
        { funcOne() }
        <br />
        { funcTwo() }
      </div>
    );
  }


因此,您根本不需要继承。在JavaScript中,尤其是React中,您应该尝试以更实用的方式进行思考。您会发现它非常强大和灵活。

您可以在此处找到有关组件组成的官方文档:https://facebook.github.io/react/docs/composition-vs-inheritance.html

我也建议您阅读以下内容:https://facebook.github.io/react/docs/thinking-in-react.html

关于javascript - Rect扩展中间件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43341191/

10-12 12:20
查看更多