如何将prop传递给基于状态返回的组件？

Question

I am attempting to return a component based on a parameter that was passed on a onClick handler this.showComponentToRender('features') . If features is clicked, it runs the showComponentToRender(name) and sets the state and in the render() , the {this.state.showComponent} shows the proper component.

However, a problem surfaces when I attempt to pass a prop resetFeatures={this.props.resetFeatures} within the

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

Clicking on the RESET A4 link, calls the resetCrossbow() which activates a function in the parent component. The parent component updates its state, and passes the state as a prop to its child.

For some reason, I can not get the resetFeatures prop to come into the <FeaturesList /> component if I return it within a function that gets set in state. Why is this? I am looking for suggestions to fix.

If I do the traditional method of placing the <FeaturesList /> within the return of the render() , all is well.

Here's the component

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

You should not save the entire component in your state. Just set a string related to it and as the value changes, the FeaturesMenu will react and call the function to render the correct component. Obviously, this code can be changed, but I think I've made my point. =)

 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

The easiest way to achieve results is pass additional properties to render specific components function and use spread to pass these props to the rendered component:

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