reactjs -在reactjs树之外公开reactjs组件方法

Question

问题：

如何向其他地方公开一个react组件的方法？

例如，我想从React的外部元素调用React路由器的this.context.router.push(location)。

也许我可以将React组件的方法添加到window对象中，这样就可以从任何通用DOM事件侦听器甚至控制台调用它。

背景/用例：

我想在我的React应用程序中使用jQuery DataTables，因为它提供了许多在React生态系统中仍然不可用的插件和配置。

我从现有的React组件(下面的实现)开始。

原始选项提供了传递呈现函数的很好的选项，例如，它可以呈现单元格内的其他反应组件。下面，“Product”列中的单元格呈现为React路由器<链接/>组件。

    const data =  [
        { 
          product_id: '5001', 
          product_price: '$5', 
          product_name: 'Apple'
         },
         ...
      ];

    const renderUrl =
      (val, row) => {
        return (<Link to={`/product/${row.product_id}`}>{row.product_name}</Link>);
      };

    const columns = [
        { title: 'Product Name', prop: 'product_id', render: renderUrl },
        { title: 'Price', prop: 'product_price' },
      ];

    <DataTable
      className="datatable-container"
      columns={columns}
      initialData={data}
    />

我为修改现有组件所做的工作包括隐藏表，使其不受React的DOM区分算法的影响，因为否则当jQuery DataTables修改DOM时，它就会中断。

1. 将组件的呈现()代码移到类上的自定义方法getDtMarkup()中(在react生命周期之外)。
2. 呈现()现在输出一个带ref和id的空div 呈现(){返回( )；}
3. componentDidMount使用ReactDomServer.renderToStaticMarkup将React组件转换为简单、无反应的标记，并将其附加到render()中的#dtContainer。最后，jQuery DataTables将呈现的表html初始化为一个花哨的'jQuery DataTable‘。 componentDidMount() { let table = this.getDTMarkup()；dtContainer = this.refs.dtContainer；renderedTable = ReactDOMServer.renderToStaticMarkup(table，dtContainer)；$(‘dtContainer’).append(RenderedTable)；jqueryTable = $('#dt')；//现在用getDTMarkup()硬编码//将html表转换为具有所需配置选项的jQuery DataTable ({ dom：‘lTfgitp‘)，按钮：'copy’、'csv‘、'excel’、'pdf‘、'print’、"pagingType"：‘pagingType’、"bAutoWidth"：false、"bDestroy"：true，"fnDrawCallback"：函数(){ console.log('datatables‘)；})；}

钢筋混凝土https://github.com/alecperkey/react-jquery-datatables/blob/master/src/Table.js#L89-L111

我提出这个问题的限制是，我现在无法在这个静态的、无反应的标记中使用React组件，比如< Link />。我现在使用的是>，但是这会重新加载页面，这样会更慢，并导致浏览器的白色闪光灯。

Answer 1

有几种方法可以将组件与“外部应用程序”连接起来。

您可以将方法作为道具传递给组件，如下所示：

const foo = function(){
  alert(1)
}

class HelloWorldComponent extends React.Component {
  render() {
    return (      
      <h1 onClick={(e) => this.props.cb()}>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <HelloWorldComponent cb={foo} name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

http://jsbin.com/zujebirusa/1/edit?js,output

使用附加到窗口的全局方法。请记住，这很难维护，因为它会污染全局名称空间。

window.foo = function(){
  alert(1)
}

class HelloWorldComponent extends React.Component {
  render() {
    return (      
      <h1 onClick={(e) => window.foo()}>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

http://jsbin.com/woyokasano/1/edit?js,output

使用ES6模块系统以保持代码库与单独作用域的整洁

//methods.js

export function foo() {
    alert(1)
}

import {foo} from './methods';
class HelloWorldComponent extends React.Component {
  render() {
    return (      
      <h1 onClick={(e) => foo()}>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

Answer 2

这就是我如何设法将一个方法从react组件公开到“全局”范围或react应用程序之外。我不太清楚你案子的具体情况，但这可能对你有用。此外，我使用钩子，但这也应该适用于遗留生命周期方法。

想象一下这是我的组成部分。它只呈现一个由状态管理的数字。

const MyCount = ({ getMethods }) => {
  const [state, setState] = useState(1);
  useEffect(() => {
    getMethods({ setState });
  }, []);
  return <h1>{state}</h1>;
}

你看，getMethods是这个工作的关键支柱。这个函数将在组件挂载时执行，并将提供我需要作为参数公开的方法。在本例中，是setState方法。

现在，让我们假设我有一个按钮外的react，我想用它来触发那个方法。

// I want to store the methods in this variable
let globalMethods;

// When rendering the react component I pass the prop `getMethods` 
// that will assign the returned value
React.render(<MyCount getMethods={methods => globalMethods = methods} />, $someEl);

// Now I can use it outside
$("#myButton").click(() => {
  globalMethods.setState(2);
})

希望这能帮上忙。或者你甚至不再需要这个了，因为它已经晚了3.9年。