标签: high-order-component

join()在数组中有什么用？什么目的？在其他语言中,它用于将数组元素连接到字符串中.例如,
Ruby Array.join

我在Swift Array加入EXC_BAD_ACCESS时问了一些关于join()的问题

想象一下有 React 组件

function List() {
   return (<ul>
             <li>1</li>
             <li>2</li>
           </ul>
    );
}

我想创建高阶组件来修改例如所有li节点的样式。

function makeRed(component) {
    return function(props) {
         const element = React.createElement(component, props);

         return React.cloneElement(
            element,
            element.props,
            React.Children.map(
                element.props.children,
                ch => React.cloneElement(ch, { 
                        ...ch.props, 
                        style: {
                           backgroundColor: "red"
                        }
                    },                    
                    ch.props.children
                )
            )
        );
    }
}

但。这是行不通的。孩子们都是空的。

有趣的是，如果我直接创建组件，这会起作用，例如

...    
const element = <ul><li>1</li><li>2</li></ul>;
...

问题：如何访问任何 React 元素的子元素和孙元素？

我想实现一个更高阶的反应组件,可用于轻松跟踪任何React组件上的事件(如点击).这样做的目的是轻松将点击(和其他事件)挂钩到我们的第一方分析跟踪器中.

我遇到的挑战是React合成事件系统需要事件(如onClick)绑定对DOM元素的反应,如a div.如果我正在包装的组件是自定义组件,就像通过更高阶函数实现的每个HOC一样,我的单击事件无法正确绑定.

例如,使用此HOC,onClick处理程序将触发button1,但不触发button2.

// Higher Order Component 
class Track extends React.Component {
  onClick = (e) => {
    myTracker.track(props.eventName);
  }

  render() {
    return React.Children.map(
      this.props.children,
      c => React.cloneElement(c, {
        onClick: this.onClick,
      }),
    );
  }
}

function Wrapper(props) {
  return props.children;
}

<Track eventName={'button 1 click'}>
  <button>Button 1</button>
</Track>

<Track eventName={'button 2 click'}>
  <Wrapper>
    <button>Button 2</button>
  </Wrapper>
</Track>

CodeSandbox带有工作示例: https ://codesandbox.io/embed/pp8r8oj717

我的目标是能够像这样使用HOF(可选择作为装饰器)来跟踪任何React组件定义的点击.

export const withTracking = eventName => Component => props => {
  return (
    <Track …

我有一个 HOC 组件，它包装了 React 的上下文 API，如下所示

import React from 'react';
import { AppContext } from './Context';

export function withAppContext(Component) {
    return function WrapperComponent(props) {
        return (
            <AppContext.Consumer>
                {state => <Component {...props} context={state} />}
            </AppContext.Consumer>
        );
    };
}

以及另一个使用此 HOC 的组件

class Hello extends Component {
    render() {
        return (
            <Fragment>
                <p>{this.props.context.state.name}</p>
                <p>{this.props.context.state.age}</p>
                <p>{this.props.user}</p>
            </Fragment>
        )
    }
}

export default withAppContext(Hello);

我打算编写一个单元测试来测试Hello组件。为了实现这一点，我有以下单元测试

const getAppContext = (context = {
        state : {
            "name" : "Jane Doe",
            "age" : 28
        } …

我试图将存储在状态中的数组中的所有卡路里相加。

  id: shortid.generate(),
  text: this.state.text,
  calorie: this.state.calorie

这是存储在状态数组膳食中的数据结构

我目前正在运行 forEach 并使用 reducer 将值相加，但它所说的“reduce”不是一个函数，我不确定我做错了什么。

     class App extends Component {
  state = {
    meals: []
  };

  addMeal = meal => {
    this.setState({
      meals: [meal, ...this.state.meals]
    });
  };

  onDelete = id => {
    this.setState({
      meals: this.state.meals.filter(meal => meal.id !== id)
    });
  };
  render() {
    return (
      <div className="container">
        <div className="jumbotron">
          <h2>Calorie Counter</h2>
          <hr />
          <Form onsubmit={this.addMeal} />
          <table className="table table-striped">
            <thead>
              <tr>
                <th>Meal</th>
                <th>Calories</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {this.state.meals.map(meal => (
                <Meal …

我写了一些 HOC，我需要将我在某个生命周期级别创建的动态对象传递给这个 HOC，但我没有将他作为道具。如果我尝试传递一些静态值（例如从一开始初始化 myObj），它会按预期工作并且我得到正确的值。

假设这是我的组件类：

 let myObj = {};

  class Test extends React.Component
   {
      constructor(props) {
        super(props);
        .....
        }

         render() {
            myObj = {test:'test'};
            return ( ... )
        }       
    }
   export default withHOC(Test, myObj);

这是我的 HOC：

const withHOC = (Component, test) => {
    class Hoc extends React.Component
    {
        constructor(props)
        {
            super(props);
            const s = test; // ---->test is empty object always !!
            ...
        }

     } 
     return Hoc;
 }

我在“测试”类上创建的“动态”对象在 HOC 类中始终为空。当我尝试直接从我的道具传递一些值时也会发生这种情况，在这种情况下页面卡住了（控制台中没有错误）。

有人知道如何解决这个问题吗？谢谢！

我注意到使用makeStyles生成的类和钩子的使用遵循以下命名法：

而使用withStyles生成的类和 HOC 的使用遵循以下：

有没有办法使用makeStyles（我喜欢使用钩子）但保留withStyles 的命名法？我喜欢这个，因为它更容易在浏览器中分析 html 并查明生成每个元素的类。

我有一个包含多组件的文件，我想导出并将其全部连接到redux，该怎么办？

Connect包装器需要导出默认值，但是我有多个组件。