將道具傳遞給子組件

Question

我似乎無法弄清楚如何將我的道具從App組件記錄到子TotalBox組件中。 它一直作為一個空對象返回。 有誰知道如何成功做到這一點？

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox {...this.props}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

totalBox.js 。

class TotalBox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // Object {}
    this.state = {
      value: this.props.value
    }
  }

  render() {
    return (
      <Col md={3}>
        <RightBox>
          <TotalCostHeader>TOTAL COST</TotalCostHeader>
          <TotalCostLabel>{this.state.value}</TotalCostLabel>
        </RightBox>
      </Col>
    )
  }
}

Answer 1

您實際上是打算通過this.props ，還是要通過this.state ？ 從代碼看來，您似乎想傳遞this.state ，它具有value屬性並使用傳遞的value屬性。 您還缺少App組件構造函數中this.state初始化：

this.state = {
  value: 0,
}

另外，請記住，在第一次渲染組件之前創建該構造函數時，只會調用一次。 以后對傳遞的props的更新將不會在constructor捕獲。 如果要捕獲以后的更新，則必須使用componentWillReceiveProps(nextProps)組件生命周期方法。

我還建議您不要使用{...this.props}語法，如果希望傳遞value屬性，則應使用顯式value={this.props.value} 。 {...this.props}看起來像是一個干凈的解決方案，但它的可讀性較差，因為它沒有提供要傳遞給組件的確切上下文。 這種語法可能有用，但是這種情況很少見。 通常，它是一個通用的高階組件，它將另一個組件封裝起來，而您希望將props傳遞給封閉的組件。

Answer 2

@Jason，您需要從父母向孩子發送道具，如下所示：

 <TotalBox value={this.state.value}/>

Answer 3

如前所述，您做錯的第一件事是在App組件中適當地將value作為props傳遞給TotalBox。 您確實有一個this.state.value ，它是在handler()函數中完成的。

乍一看，解決方案是簡單地設置<TotalBox value={this.state.value}/>

但是，現在有了一個問題，因為尚未調用handler()函數（這是根據代碼實際設置狀態的唯一位置handler() ，所以尚未設置您的狀態。

如果希望稍后再調用它，則需要在App組件this.state.value某種占位符值設置為this.state.value 。 可能看起來像這樣：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
    this.state = {value: 0} // placeholder value set here
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox value={this.state.value}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

另外，如果未設置state或state.value，則無法渲染TotalBox組件。 所以在App組件中是這樣的：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
    this.state = {} // don't forget to declare the state object itself
  }

  handler() {
    this.setState({
      value: 0
    })
  }

    render() {
        const totalBox = this.state.value ? <TotalBox value={this.state.value}/> : null
          return (
          <Wrapper>
            <Grid>
              <Row>
                <CostBox/>
                <Input/>
                {totalBox}
              </Row>
            </Grid>
          </Wrapper>
        )
          }
}

編輯：您提到要通過子組件更新父狀態。 以下是使用handler函數執行此操作的代碼：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      value: 0
    })
  }

  render() {

  return (
  <Wrapper>
    <Grid>
      <Row>
        <CostBox/>
        <Input/>
        <TotalBox value={this.state.value} handler={this.handler.bind(this)}/>
      </Row>
    </Grid>
  </Wrapper>
)
  }
}

class TotalBox extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // Object {}
    this.state = {
      value: this.props.value
    }
  }

 // Im using handler as a name for this function just as an example
 // this would be whatever you call as a function to update the state of
 // the parent component.
 handler () {
   // this is the function from your parent component
   // being executed to update its state
   this.props.handler()
 }  

  render() {
    return (
      <Col md={3}>
        <RightBox>
          <TotalCostHeader>TOTAL COST</TotalCostHeader>
          <TotalCostLabel>{this.state.value}</TotalCostLabel>
        </RightBox>
      </Col>
    )
  }
}