将函数反应组件转换为反应类以添加 ref 属性答案

【问题标题】：Convert A function react component To a react class To Add ref attribute将函数反应组件转换为反应类以添加 ref 属性
【发布时间】：2018-02-17 14:47:27
【问题描述】：

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

const TriggerComponent = () => <div> trigger example </div>

<MyComponent  trigger={<TriggerComponent />} />

在MyComponent类里面，我想通过cloneElement或者creatElement API给触发器Element添加ref属性，当然我不能按照react文档给功能组件添加ref属性。所以我的想法是把函数组件转成类？

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

【问题讨论】：

您想从TriggerComponent 获得ref 吗？

标签： javascript reactjs

【解决方案1】：

将 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>

【讨论】：

【解决方案2】：

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

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

运行示例：

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'));

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

【讨论】：

嗨 Sagiv，该组件是为一个简单的库构建的，所以我认为如果我不向 trigger 道具添加额外的条件会更有用