Question

我想使用React组件作为对象，以便在渲染/安装它们之前基于其他组件进行一些计算。我有一个可行的解决方案，但我发现a.type.prototype.calculate.bind(a)()部分很脏。

这是我目前的方式（also on JSBin）：

class ChildComponent extends React.Component {
  calculate() {
    return this.props.a + this.props.b;
  }

  render() {
    return <span>{this.props.a + this.props.b} </span>
  }
}

class ParentComponent extends React.Component {
  render() {
    var children = [
      <ChildComponent a={2} b={3} key="1" />,
      <ChildComponent a={1} b={2} key="2" />
    ];    
    var children_sorted = children.slice();
    
    children_sorted.sort((a,b) => {
      return a.type.prototype.calculate.bind(a)()
      - b.type.prototype.calculate.bind(b)()
    });

    return (
      <h1>Children {children} -> {children_sorted}</h1>      
    );
  }
}

ReactDOM.render(
  <ParentComponent/>,
  document.getElementById('react_example')
);

<div id="react_example"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

有人有更好的方法实现这一目标吗？

Answer 1

想到的一种方法是将calculate设为静态：

static calculate({a, b}) {
  return a + b;
}

...并将props传递到其中：

children_sorted.sort((a,b) => a.type.calculate(a.props) - b.type.calculate(b.props));

实时示例：

class ChildComponent extends React.Component {
  static calculate({a, b}) {
    return a + b;
  }

  render() {
    return <span>{this.props.a + this.props.b} </span>
  }
}

class ParentComponent extends React.Component {
  render() {
    var children = [
      <ChildComponent a={2} b={3} key="1" />,
      <ChildComponent a={1} b={2} key="2" />
    ];    
    var children_sorted = children.slice();

    children_sorted.sort((a,b) => a.type.calculate(a.props) - b.type.calculate(b.props));

    return (
      <h1>Children {children} -> {children_sorted}</h1>      
    );
  }
}

ReactDOM.render(
  <ParentComponent/>,
  document.getElementById('react_example')
);

<div id="react_example"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

如果孩子们需要进行相同的计算，他们也可以通过calculate使用ChildComponent.calculate(this.props)（它们将始终使用calculate上的ChildComponent版本或this.constructor.calculate(this.props)，它将在创建实例的构造函数上使用calculate的版本（通常情况下）。如果它是ChildComponent的子类，并且不需要自己的{{1} }，它将继承calculate（是的，静态方法是使用ChildComponent语法继承的。）

Answer 2

是否有必要使用组件进行计算？

这可以是一个简单的功能。该示例可能会进一步简化....

class ParentComponent extends React.Component {
  calculate = (a, b) => a + b;

  render() {
    const children = [this.calculate(2, 3), this.calculate(1, 2)];
    const children_sorted = [this.calculate(2, 3), this.calculate(1, 2)].sort();

    return (
      <h1>
        {children.map((x) => x)} => {children_sorted.map((x) => x)}
      </h1>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('react_example'));

<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="react_example"></div>

在组件挂载之前在React Element上调用函数

2 个答案: