React - 通过无状态组件将函数发送到 child

Question

我可以毫无问题地将函数向下发送到 class 组件。但是当我想将一个函数传递给无状态组件，然后从那里传递给 class 组件时，出现了问题。它说“this.props.getProduct is not a function”，所以我想必须添加一些绑定的东西，但我已经在顶部组件中添加了。

最上面的组件是这样的：

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>
    )
  }
}

这里是"Main"，中间无状态组件

const Main = (props) =>

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

      />}
  />

"Product"发生错误的组件

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 = (props) 替换为 const Main = ({ getProduct, product}) 然后将其传递给

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 - 通过无状态组件将函数发送到 child

React - send function to child via stateless component

reactjs

react-router-v4