Question

这是我尝试做的一个例子。我想在MyComponent类中传递props，而不使用<MyComponent hello={'Hello World'}/>，因为我将MyComponent传递给其他一些库。

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    const { hello } = this.props;
    return (
      <div>{hello}</div>
    );
  }
}

// this line is wrong
MyComponent.props = {
  hello: 'Hello World!'
}

<MyComponent />

react-redux如何连接添加this.props.state，并将任何其他函数映射到组件的道具？我想将自定义对象注入组件。

Answer 1

您可以设置默认道具。我认为这是一个很好的做法。

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    const { hello } = this.props;
    return (
      <div>{hello}</div>
    );
  }headerProp: "Header from props...",
   contentProp:"Content from props..."
}

MyComponent.defaultProps = {
   hello: 'Hello World!'
}

<MyComponent />

Answer 2

您需要创建Higher Order Component

function withMyObject(WrappedComponent,helloText) {
  return class extends React.Component {

    render() {
      return <WrappedComponent {...this.props} hello={helloText} />;
    }
  };
}

用法：

UpdatedComponent = withMyObject(ComponentToBeWrapped,"Hello");

reactjs，如何在班级传递道具

2 个答案: