Question

我可以将函数发送到类组件而没有任何问题。但是，当我想将一个函数传递给无状态组件，并从那里传递给一个类组件时，就会出现问题。它说＆＃34; this.props.getProduct is not a function＆＃34; ，所以我想必须添加一些绑定的东西，但我已经在顶级组件中做了。

顶级组件是这样的：

class App extends Component { 

  constructor(){
    super()
    this.state = {
      product: {}
    }

    this.getProduct = this.getProduct.bind(this)
  }

  getProduct(productId){

    const result = productlist.products.filter(obj => {
      return obj.id === productId;

    })
    this.setState({
      product: result[0]
    })

 }

  render() {

      const {product} = this.state

    return (

      <div className="App">

        <BrowserRouter>
          <div>

            <Route path="/" render={props =>
              <Main  
                getProduct = {this.getProduct}
                product = {this.state.product}
                {...props} 
              />}
            />

          </div>
        </BrowserRouter>
       </div>
    )
  }
}

这是＆＃34; Main＆＃34;，中间无状态组件

const Main = (props) =>

  <Route path="/products/:product" render={ props =>
      <Product  
        getProduct={props.getProduct}
        product={props.product}
        {...props} 

      />}
  />

＆＃34;产品＆＃34;发生错误的组件

class Product extends Component {

  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {

    this.props.getProduct(this.props.match.params.product)           // "not a function"

  }

我怀疑需要进行某种额外的绑定，但是如何？这是一个沙盒，您可以在其中看到问题：

codesandbox

Answer 1

你在这里发生了碰撞：

  const Main = (props) =>

  <Route path="/products/:product" render={ props =>
      <Product  
        getProduct={props.getProduct}
        product={props.product}
        {...props} 

      />}
  />

来自Main的道具和渲染中的道具，所以当你传递道具时，它会从你传递的渲染函数中获取道具而不是来自Main的道具。您必须重命名一个，或用 const Main =（{getProduct，product}）替换 const Main =（props），然后将其传递给

Answer 2

route渲染函数props参数遮蔽了Main组件的props变量。更好地更改render参数的变量名称

const Main = (props) =>

  <Route path="/products/:product" render={ p =>
      <Product  
        getProduct={props.getProduct}
        product={props.product}
        {...props} 

      />}
  />

Answer 3

这应该做的工作：

class App extends Component {

  constructor() {
    super()
    this.state = {
      product: {},
    }

    this.getProduct = this.getProduct.bind(this)
  }

  getProduct(productId) {

    const result = productlist.products.filter(obj => {
      return obj.id === productId

    })
    this.setState({
      product: result[0],
    })

  }

  render() {

    const { product } = this.state

    return (

      <div className="App">

        <BrowserRouter>
          <div>

            <Route
              path="/products/:product" render={props =>
              <Product
                getProduct={props.getProduct}
                product={props.product}
                {...props}

              />}
            />

          </div>
        </BrowserRouter>
      </div>
    )
  }
}

React - 通过无状态组件向子节点发送功能

3 个答案: