Question

我有一个ModalComponent，可以容纳几个或没有输入元素。它也可以只是一个字符串。还有一个SubmitButton。如果有输入元素，我想在第一个元素上设置autoFocus。如果没有输入元素，我想在SubmitButton上设置autoFocus 可以说我们有类似的东西：

  render(){
    return (<div>
       {this.props.someSubComponent}
        <button autoFocus={trueIfsomeSubComponentHasNoAutoFocusSet}>Submit</button>
        </div>)
  }

我试图（递归）搜索someSubComponent的所有道具和子项，以搜索称为autoFocus的道具，该道具仅在someSubComponent不是功能组件时才起作用。否则，我将无法遍历组件内部的道具。

直到现在我只能看到两种解决方案：

我通过将其作为道具传递到任何地方来手动设置autoFocus
（可能）我使用React.forwardRef包装功能组件，并使用refs确定按钮的autoFocus属性

还有其他（更好）的建议吗？：）

如何在React中动态设置autoFocus属性

0 个答案: