Question

在我的应用程序中，我有几个表单字段组件，它们的行为均相同，但外观略有不同。我希望能够使用单个formfield组件的状态和类方法，同时提供某种替代的render方法，以便可以动态自定义此元素的外观。我知道我可以包装孩子，然后在组件中使用props.children。但是我希望以某种方式重用组件方法：

class Parent extends React.Component {
  render() {
    <div className="parent">
      <ChildFormField
        renderAlternate={self => {
          return (
            <div className="child--alternate">
              <input onChange={self.doThing} />
            </div>
          );
        }}
      />
    </div>
  }
}

// And the child component look something like...
class ChildFormField extends React.Component {
  state = {
    value: null
  }

  doThing = value => {
    return this.setState({ value });
  }

  render() {
    if (this.props.renderAlternate !== undefined) {
      return this.props.renderAlternate();
    }

    // standard return
    return <div />;
  }
}

我在React的基本用法之外还比较陌生。有没有推荐的方法来实现此功能？

Answer 1

您的CountryEntity函数需要参数renderAlternate。因此，调用时需要传递self。

this

请参见https://codesandbox.io/s/w759j6pl6k作为代码示例。

Answer 2

此食谱称为render prop。它在合适的地方得到了广泛的使用，但是在这里看起来像是糟糕的设计决策，主要是因为它存在于访问组件self实例。继承就是这种情况：

class AlternateChildFormField extends ChildFormField {
  render() {
      return (
        <div className="child--alternate">
          <input onChange={this.doThing} />
        </div>
      );
  }
}

在React中，通常优选函数组合，但是如果继承具有良好的用途，则可以接受继承的解决方案。 ChildFormField要求doThing是一种方法而不是辅助函数，因为它需要访问this.setState。

一种替代方法是使用React 16.7挂钩和功能组件。这样，相同的成分可以用成分表示：

const useThingState = () => {
  const [state, setState] = useState({ value: null });

  return value => {
    return setState({ value });
  };
}

const ChildFormField = props => {
  // not used here
  // const doThing = useThingState();

  return <div />;
}

const AlternateChildFormField =  props => {
  const doThing = useThingState();

  return (
    <div className="child--alternate">
      <input onChange={doThing} />
    </div>
  );
}

Answer 3

在React生态系统中进行管理的常见方式是高阶组件：

ref：https://reactjs.org/docs/higher-order-components.html 参考：https://medium.com/backticks-tildes/reusing-react-component-logic-with-higher-order-component-3fbe284beec9

此外，您正在寻找的可能是状态逻辑的重用。

作为React 16.7-alpha，您可以使用钩子将状态逻辑与功能组件一起重用，但API可能会发生重大更改。

ref：https://medium.com/@nicolaslopezj/reusing-logic-with-react-hooks-8e691f7352fa

为React Component

3 个答案: