Question

我需要继承状态。我可以继承状态吗？当我这样做时，我得到一个空状态。

class Example extends Component {
  constructor(props) {
    super();
      this.state = {
        param1: 
      };
  }
 ...
}

class Example2 extends Example {
  render() {
    return (
      {this.state.param1} // empty
    )
  }
}

Answer 1

您可以使用常规合成，而不是使用继承，而是将整个Example状态作为道具传递给Example2，并使用传递给Example2的道具作为初始状态。

示例

class Example extends React.Component {
  state = {
    param1: "test"
  };

  render() {
    return <Example2 {...this.state} />;
  }
}

class Example2 extends React.Component {
  state = {...this.props};

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

React并不真正支持继承，您可以在此链接上找到更多信息：

https://reactjs.org/docs/composition-vs-inheritance.html#so-what-about-inheritance

您可以做的是拥有一个全局状态管理器（例如Redux）或通过以下方式将状态传递给Example2组件：

class Example extends Component {   
  constructor(props) {
    super(props);

    this.state = {
      param1: 'test'
    };

  render() {
    return (
      <Example2 state={this.state} />
    );   
  } 
}

之后，您将可以在Example2的{{1}}中找到它。

Answer 3

class Example extends Component {
  constructor(props) {
    super();
      this.state = {
        param1: "param1"
      };
  }
  render() {
  const { param1 } = this.state;
  return (
  <Example2 param1={param1} />
 )
 }
}   

class Example2 extends Example {
  render() {
    const { param1 } = this.props;
    return (
      {param1} 
    )
  }
}

Answer 4

科维奇。您只能将一个组件的状态传递给另一个组件，例如以下代码：

class Example extends Component {
  constructor(props) {
    super();
      this.state = {
        param1: 
      };
  }

render(){

return (<Example2 param1 ={this.state.param1} />)
}

 ...
}

class Example2 extends Example {

  constructor(props) {
    super();
      this.state = {
        param1: this.props.param1
      };
  }
  render() {
    return (
      {this.state.param1} // empty
    )
  }
}

Answer 5

您可以如下扩展状态：

constructor(props) {
  super(props)

  this.state = {
    ...this.state,
    extraStuff: '',
  }
}

扩展状态反应

5 个答案: