Question

我有一个带触发元素的组件，触发元素是A反应组件，如下所示

let resetFields = {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
}

this.props.initialize(resetFields, true); //keepDirty = true;

在MyComponent类中，我想通过cloneElement或creatElement API向触发元素添加ref属性，当然，我不能根据react文档向函数组件添加ref属性。所以我的想法是将函数组件转换为类？

如果您对我如何实现这个想法有任何想法，请告诉我？

Answer 1

你可以将ref回调传递给无状态组件：

const TriggerComponent = ({ triggerRef }) => <div ref={triggerRef}> trigger example </div>

运行示例：

＆＃13;

const TriggerComponent = ({ triggerRef }) => <div ref={triggerRef}> trigger example, click me </div>

class App extends React.Component {
  componentDidMount(){
    this.trigger.addEventListener('click', () => { console.log('triggered') });
  }

  render() {
    return (
      <div >
        <TriggerComponent triggerRef={ref => { this.trigger = ref }} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

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

＆＃13;

Answer 2

向有状态组件子级添加ref的最佳方法是创建一个类Ref并将您的函数组件注入一个子节点，如下所示：

class Ref extends React.Component {
constructor(props) {
  super(props);
}
componentDidMount() {
  const { innerRef } = this.props;
  if (innerRef) innerRef(findDOMNode(this));
}
render() {
  const { children } = this.props;
  return React.Children.only(children);
}

}

我们可以在函数组件中添加ref。

const Trigger = ()=> <button> trigger </button>
const RefTrigger = () => <Ref innerRef={this.setRef}><Trigger/></Ref>

将函数react组件转换为react类To Add ref属性

2 个答案: