Question

我有两个有状态组件：Grid和Item。Item由Grid渲染，并且具有引用Grid <Item example={this.props.inGridHandler} />中定义的方法（处理程序）的props 好。但是，如果我有第三个有状态组件，将其命名为Handy，并且希望inGridHandler不在像以前那样在Grid组件中定义，而是在Handy中定义。如何通过保留所有这些结构来实现这一目标？

class Grid extends Component{

ingridHandler=()=>{
console.log('I want to be  defined in Handy Component, not here');
}

Render(){
Return(
`<Item example={this.inGridHandler} />`
);

}
};
export default Grid;




class Handy extends Component{

inGridHandlerWantToBeDefinedHere=()=>{
console.log("I want to be defined here and pass to Grid component as props of Item component which is rendered there'
}

render(){

return(

)
}


}

Answer 1

如果我理解正确的话，这就是您想要的。这是一个非常简单的过程。您只是将道具一直向下传递。但是，正如我以后尝试在评论中解释的那样，如果您不想通过这样的道具，您应该考虑更好的方法。

class Handy extends React.Component {
  inGridHandler = () => {
    console.log("ingridhandler");
  };

  render() {
    return <Grid inGridHandler={this.inGridHandler} />;
  }
}

class Grid extends React.Component {
  render() {
    return <Item inGridHandler={this.props.inGridHandler} />;
  }
}

const Item = props => (
  <button onClick={props.inGridHandler}>Click me and look the console.</button>
);

ReactDOM.render(
  <Handy />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

组件之间的关系

1 个答案: