将动态值传递给高阶组件

Question

在我的代码中，我必须在不同的地方使用相同的代码行。所以我认为现在是将这段代码放入某种基础 class 的合适时机。我读过 Higher-Order Components 这似乎是可行的方法，并且按照一些示例我最终得到了以下代码，但该代码不起作用。我尝试了一些方法，但无法正常工作。

我的 HOC：

export interface HocProps {
    DynamicId: string
}

const withDiv = (hocProps) => (BaseComponent) => {
    return class extend React.Component {
        render() {
            return (
                <div id={ hocProps.DynamicId }>
                    <BaseComponent />
                </div>
            );
        }
    }
}

export default withDiv;

要被 div 包装的组件:

import withDiv from './MyHoc';

class MyComponent extends React.Component {
    render() {
        return (
            <h3>Some content here</h3>
        );
    }
}

export default withDiv({ DynamicId: <dynamic value> })(MyComponent);

另一个使用 MyComponent 的组件：

import MyComponent from './MyComponent';

export class OtherComponent extends React.Component {
    render() {
        return (
            <div>
                ... Some content here ...
                <MyComponent DynamicId={ 'id123' } />
            </div>
        );
    }
}

我想在 OtherComponent 中传递一个 id。然后在 MyComponent 中，这个 id 必须作为传递给 HOC，这是行不通的。我只能将静态值传递给 HOC。

我是新手，我想我也犯过同样的错误。

所以我的问题是：我做错了什么以及如何做对的？也许有 another/better 的方法？

提前致谢。

编辑： 我希望得到这样的结果：

<div>
    ... Some content here ...
    <div id='id123'>
        <h3>Some content here</h3>
    </div>
</div>

Answer 1

我不确定您如何传递动态值以及它有什么问题。但是，您可以像

这样创建您的组件

export interface MyCustomProps {
    customProp: string;
}

export interface MyCustomState {
    something: string;
}

class MyComponent extends React.Component<MyCustomProps, MyCustomState>{
  render(){<div>
    ... Some content here ...
    <div>{this.props.customProp}</div>
  </div>}
}
export default MyComponent

并在另一个组件中使用它，例如

import MyComponent from './MyComponent';

export class OtherComponent extends React.Component {
  render() {
    return (
        <div>
            ... Some content here ...
            <MyComponent customProp={someDynamicStringValues}/>
        </div>
    );
  }
}

你可以递归地做

Answer 2

试试这个

const withDiv = (BaseComponent) => {
    class CompWithDiv extends React.Component {
        render() {
            return (
                <div id={this.props.DynamicId}>
                    <BaseComponent />
                </div>
            );
        }
    }
    return CompWithDiv ;
}

export default withDiv;

Answer 3

根据您的实施情况，您可以通过两种方式使用 HOC。我创建了一个 sandbox，这将帮助您了解如何使用 HOC。

一种方法是提取道具 const hocWrapper = Component => props => { // return NewComponent and call it too }。这里你必须在返回时调用你的组件。

其他方法是解构或使用hocWrappers中的道具。 const hocWrapper = Component => { // return NewComponent, you will receive props inside the newComponent and do what you wish}

将动态值传递给高阶组件

Pass dynamic value to higher order component

reactjs

higher-order-components