Question

我有一个简单的反应库，是我想要操纵的道具。为此，我将其封装在HOC中。

示例，这是库中的类：

   class Hello extends React.Component {
      render() {
        return <div>Hello {this.props.name}</div>;
      }
    }

我的简化HOC：

const ReplaceHello = (props) => {
return <Hello name={props.world()} />
}

我这样做是为了用一个执行某种工作的函数替换库中的“name”字符串字段并返回一个字符串。样品： -

ReactDOM.render(
  <ReplaceHello world={function(){ return 5*3}} />,
  document.getElementById('container')
);

该库有另一个组件，它使用原始的“Hello”组件，如下所示：

    class World extends React.Component {
      render() {
        return <div>
{this.props.data.map(function(value){
return 
        <Hello key={value.id} name={this.props.name} />});}
        <p> Thus the story begins</p>
        </div>;
      }
    }

然而，现在我在我的智慧结束时如何封装或操纵World类以用<Hello>替换<ReplaceHello>。由于'Hello'和'World'都是库的一部分，我无法更改该代码，我想根据函数的结果生成名称字段。

我想替换<Hello key={value.id} name={this.props.name} />给我功能<Hello key={value.id} name={value.name} />

我们可以使用HOC或任何反应模式替换其他组件内使用的组件吗？

0 个答案: