Question

我正在尝试将函数引用发送到导入的组件。所以最好使用ref属性或props？

我想找到一种最佳的标准方法。

<MyComponent ref="ListView" />

或此方法：

<MyComponent show="this.showModal" hide="this.hideModal" />

Answer 1

如果将函数作为字符串传递（例如"this.showModal"）将不会有效果。

用大括号将它们向下传递：

<MyComponent show={this.showModal} hide={this.hideModal} />

引用的目的是直接操作DOM，而不是将某些东西传递给组件。例如，您可能想用jQuery操作DOM

Answer 2

编辑：我理解您的问题，如果您有很多方法可以使用... props，但也可以将props作为单独的方法进行传递。

我认为您指的是受控组件和非受控组件之间的区别：不受控制 https://reactjs.org/docs/uncontrolled-components.html 受控- https://reactjs.org/docs/forms.html

如果要通过DOM（使用引用）或组件本身来控制它，则答案取决于您的组件“逻辑”。

Answer 3

我们不使用ref进行事件处理，最好使用带有{}大括号的 JSX 语法将处理程序作为道具传递给子组件。

Answer 4

如果我正确理解了您的问题，您想将事件处理程序发送给父级的子级吗？

parent.js

class ParentComponent extends Component {

  handler = () => {
     console.log("handler click">
  }

  render() {
    return (
      <div>
         <Child handler={this.handler} />
      </div>
    );
  }

}

child.js

const Child = ({ handler }) => (
  <Button onClick={handler} />
)

哪种方法更适合发送函数引用以响应组件？

4 个答案: