如何将道具传递给父对象（Material-UI React）

Question

因此，我到处都在寻找解决方案，但是没有运气。

我试图将父React组件的this.state.nextID作为属性this.state.nextID给子组件。 但是，当我尝试访问子级中的该属性时，该属性为null。 我正在使用Material-UI进行反应，我认为问题出在withStyles函数上，因为当我检查页面的源代码时，我在withStyles(ServerBlock)节点上看到key属性。 但是，该节点的子级为ServerBlock ，没有key属性。 我究竟做错了什么？

ConfigBlock.js

class ConfigBlock extends Component {
  constructor () {
    super()
    this.state = {
    children: [],
    nextID: 0
    }
    this.handleChildUnmount = this.handleChildUnmount.bind(this);
  }
  handleChildUnmount = (key) => {
    console.log(key)
    this.state.children.splice(key, 1);
    this.setState({children: this.state.children});
  }
  addServerBlock() {
    this.state.children.push({"id": this.state.nextID, "obj": <ServerBlock unmountMe={this.handleChildUnmount} key={this.state.nextID} />})
   this.setState({children: this.state.children})
    this.state.nextID += 1
  }
  addUpstreamBlock() {
    this.state.children.push({"id": this.state.nextID, "obj": <UpstreamBlock unmountMe={this.handleChildUnmount} key={this.state.nextID} />})
    this.setState({children: this.state.children})
    this.state.nextID += 1
  }
  render () {
    const {classes} = this.props;
    return (
      <div className={classes.container}>
        <Card className={classes.card}>
          <CardContent>
            <Typography className={classes.title} color="primary">
              Config
            </Typography>
                <div>
              {this.state.children.map((child, index) => {
                return (child.obj);
              })}
            </div>
          </CardContent>
          <CardActions>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.addServerBlock.bind(this) }>
              Server
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.addUpstreamBlock.bind(this) }>
              Upstream
              <AddIcon />
            </Button>
          </CardActions>
        </Card>
      </div>
    );
  }
}

ConfigBlock.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ConfigBlock);

ServerBlock.js

class ServerBlock extends Component {
  constructor (props) {
    super(props)
    this.state = {
      children: []
    }
  }
  addServerBlock() {
    this.state.children.push(<NginxEntry/>)
    this.setState({children: this.state.children})
  }
  deleteMe = () => {
    this.props.unmountMe(this.props.key);
  }
  render () {
    const {classes} = this.props;
    return (
      <div className={classes.container}>
        <Card className={classes.card}>
          <CardContent>
            <Typography className={classes.title} color="primary">
              Server
            </Typography>

          </CardContent>
          <CardActions>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Key/Value
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Location
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={() => { console.log('onClick'); }}>
              Comment
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={ this.deleteMe }>
              <DeleteIcon />
            </Button>
          </CardActions>
        </Card>
      </div>
    );
  }
}

ServerBlock.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ServerBlock);

Answer 1

key是一个特殊的React属性，它不是prop，即孩子将永远无法访问它的值。 如果孩子需要使用该值，请通过其他道具（以及通过钥匙）提供，例如

<ServerBlock
  unmountMe={this.handleChildUnmount}
  key={this.state.nextID}
  id={this.state.nextID}
/>

---

...此外，您的代码非常不寻常。 您不应该直接改变状态（应该始终使用setState ），并且通常不会在状态中存储整个组件。 ConfigBlock是，这是您的ConfigBlock组件的替代（未ConfigBlock ）实现，该实现使用setState并ConfigBlock了一些逻辑：

class ConfigBlock extends Component {
  constructor () {
    super()
    this.state = {
      nextID = 0,
      children: [],
    }
    this.handleChildUnmount = this.handleChildUnmount.bind(this);
    // bind this function once here rather than creating new bound functions every render
    this.addBlock = this.addBlock.bind(this)
  }

  handleChildUnmount = (key) => {
    console.log(key)
    this.setState(state => {
      return {
        // `state.children.splice(key, 1)`, aside from mutating the state,
        // will not work as expected after the first unmount as the ids and
        // array positions won't stay aligned
        children: state.children.slice().filter(child => child.id !== key)
      }
    })
  }

  // Consolidate the two addBlock functions, given we're determining the type
  // of component to render in the render function.
  addBlock(blockType) {
    this.setState(state => {
      return {
        children: [...state.children, { id: state.nextID, type: blockType }]
        nextID: state.nextID + 1
      }
    })
  }

  render () {
    const {classes} = this.props;
    return (
      <div className={classes.container}>
        <Card className={classes.card}>
          <CardContent>
            <Typography className={classes.title} color="primary">
              Config
            </Typography>
            <div>
              {this.state.children.map(child => {
                // determine the component to render here rather than in the handlers
                if (child.type === 'server') {
                  return <ServerBlock key={child.id} id={child.id} unmountMe={this.handleChildUnmount(child.id)} />
                } else if (child.type === 'upstream') {
                  return <UpstreamBlock key={child.id} id={child.id} unmountMe={this.handleChildUnmount(child.id)} />
                }
              })}
            </div>
          </CardContent>
          <CardActions>
            <Button variant="contained" color="primary" className={classes.button} onClick={this.addBlock('server')}>
              Server
              <AddIcon />
            </Button>
            <Button variant="contained" color="primary" className={classes.button} onClick={this.addBlock('upstream')}>
              Upstream
              <AddIcon />
            </Button>
          </CardActions>
        </Card>
      </div>
    );
  }
}