Question

首先让我举个例子：

<List hidden={this.state.hideList} />

对于这种情况，我希望hidden prop能够以下列方式运行：if value为true - 隐藏组件或以其他方式显示。 List不应该知道这个道具。

我对React内部结构了解不多，但似乎有可能。我们只需要扩展React.Component类。也许在全球范围内扩展所有功能性道具并不是一个好主意，但在顶部有这样的东西会很好：

import { ReactComponent } from 'react'
import extend, { hidden } from 'react-functional-props'
const Component = extend(ReactComponent, hidden)

它让我想起Angular.js中的指令，但在这里我们可以将它们组合起来。

Answer 1

您可以在渲染方法中返回null或undefined以防止渲染，或使用条件类隐藏它，如下所示：

return !this.state.hideList && <List />;

关于

反应性官能道具

在React中，您可以使用更高阶的组件（HOC）来实现您的需求，例如：

const Hideable = Component => (props) => {
  const { isHidden, ...otherProps } = props;

  return !isHidden && (<Component {...otherProps} />);
};

const HideableList = Hideable(List);

...

return (
  <div>
    <HideableList isHidden={this.state.hideList} /> // The isHidden props is handled by the HOC
  </div>
);

但对于这样一个简单的用例，我认为只需处理隐藏并在父组件中显示就更清晰了。

反应功能道具

1 个答案: