如何將prop傳遞給基於狀態返回的組件？

Question

我試圖基於在onClick處理程序this.showComponentToRender('features')上傳遞的參數返回組件。 如果單擊功能，它將運行showComponentToRender(name)並設置狀態，並在render() ， {this.state.showComponent}顯示適當的組件。

但是，當我嘗試在內部傳遞prop resetFeatures={this.props.resetFeatures}時，問題resetFeatures={this.props.resetFeatures}

showFeatures() {
    return (<FeaturesList
             updateCad={this.props.updateCad}
             resetFeatures={this.props.resetFeatures}
           />);
  }

單擊RESET A4鏈接，調用resetCrossbow()激活父組件中的功能。 父組件更新其狀態，並將該狀態作為道具傳遞給其子級。

由於某些原因，如果我在設置為狀態的函數中返回它，則無法使resetFeatures道具進入<FeaturesList />組件。 為什么是這樣？ 我正在尋找修復建議。

如果我使用將<FeaturesList />放置在render()返回值內的傳統方法，一切都很好。

這是組件

import React, { Component } from 'react';
import FeaturesList from  './FeaturesList';
import ColorsList from './ColorsList';
import './../assets/css/features-menu.css';

export default class FeaturesMenu extends Component {

  constructor(props) {
    super(props);

    this.state = {
      showComponent: this.showFeatures()
    };

    this.showFeatures = this.showFeatures.bind(this);
    this.showColors = this.showColors.bind(this);
  }

  showFeatures() {
    return (<FeaturesList
             updateCad={this.props.updateCad}
             resetFeatures={this.props.resetFeatures}
           />);
  }

  showColors() {
    this.props.resetCrossbow();
    return <ColorsList switchColor={this.props.switchColor} />
  }

  showComponentToRender(name) {
    if (name === 'features') {
      this.setState({
        showComponent: this.showFeatures()
      });
    } else {
      this.setState({
        showComponent: this.showColors()
      })
    }
  }

  render() {
    // console.log(`this.props.resetFeatures: ${this.props.resetFeatures}`);

    return (
      <div id="features-menu-wrapper">
        <nav id="features-menu">
          <li onClick={() => this.showComponentToRender('features')}>FEATURES</li>
          <li onClick={() => this.showComponentToRender('colors')}>COLORS</li>
          <li onClick={() => this.props.resetCrossbow()}>RESET A4</li>
        </nav>

        <div id="component-wrapper">
          {this.state.showComponent} // <- I am not able to pass resetFeatures prop if I do it this way. Why?

          {/* <FeaturesList
             updateCad={this.props.updateCad}
             resetFeatures={this.props.resetFeatures} <- I am able to pass resetFeatures prop as normal.
           />
          <ColorsList switchColor={this.props.switchColor} /> */}

        </div>
      </div>
    );
  }

}

Answer 1

您不應該將整個組件保存在狀態中。 只需設置一個與之相關的字符串，隨着值的更改， FeaturesMenu將作出反應並調用該函數以呈現正確的組件。 顯然，可以更改此代碼，但我想我已經指出了。 =）

 const FeaturesList = props => (<div>Features List</div>); const ColorsList = props => (<div>Colors List</div>); class FeaturesMenu extends React.Component { constructor(props) { super(props); this.state = { currentComponent: 'Features' }; this.showFeatures = this.showFeatures.bind(this); this.showColors = this.showColors.bind(this); } showFeatures() { return (<FeaturesList updateCad={this.props.updateCad} resetFeatures={this.props.resetFeatures} />); } showColors() { this.props.resetCrossbow(); return <ColorsList switchColor={this.props.switchColor} /> } showComponentToRender(name) { this.setState({ currentComponent: name }) } render() { return ( <div id="features-menu-wrapper"> <nav id="features-menu"> <li onClick={() => this.showComponentToRender('Features')}>FEATURES</li> <li onClick={() => this.showComponentToRender('Colors')}>COLORS</li> <li onClick={() => this.props.resetCrossbow()}>RESET A4</li> </nav> <div id="component-wrapper"> {this[`show${this.state.currentComponent}`]()} </div> </div> ); } } // for testing purposes const props = { resetCrossbow: () => {}, switchColor: () => {}, updateCad: () => {}, resetFeatures: () => {} } ReactDOM.render(<FeaturesMenu {...props}/>, document.querySelector('main')) 

 <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> <main/> 

Answer 2

獲得結果的最簡單方法是傳遞其他屬性以渲染特定組件的功能，並使用傳播將這些道具傳遞給呈現的組件：

 const FeaturesList = ({additional = 'Empty'} = {}) => <div>Feature List with additional prop <b>{additional}</b></div> const ColorsList = ({additional = 'Empty'} = {}) => <div>Colors List with additional prop <b>{additional}</b></div> class FeaturesMenu extends React.Component { constructor(props) { super(props); this.state = { showComponent: this.showFeatures({additional: 'Initial features'}) }; this.showFeatures = this.showFeatures.bind(this); this.showColors = this.showColors.bind(this); } showFeatures(props) { return (<FeaturesList updateCad={this.props.updateCad} resetFeatures={this.props.resetFeatures} {...props} />); } showColors(props) { this.props.resetCrossbow(); return <ColorsList switchColor={this.props.switchColor} {...props} /> } showComponentToRender(name) { if (name === 'features') { this.setState({ showComponent: this.showFeatures({additional: 'features adds'}) }); } else { this.setState({ showComponent: this.showColors({additional: 'colors adds'}) }) } } render() { return ( <div id="features-menu-wrapper"> <nav id="features-menu"> <li onClick={() => this.showComponentToRender('features')}>FEATURES</li> <li onClick={() => this.showComponentToRender('colors')}>COLORS</li> <li onClick={() => this.props.resetCrossbow()}>RESET A4</li> </nav> <div id="component-wrapper"> {this.state.showComponent} </div> </div> ); } } const props = { resetCrossbow: () => null, switchColor: () => null, updateCad: () => null, resetFeatures: () => null } ReactDOM.render(<FeaturesMenu {...props}/>, document.querySelector('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> <root/>