Question

好的，我不知道为什么这不起作用。根据我所看到的，一切都已正确设置。

我正在使用"react-router-dom": "^5.0.0"

该代码还使用Tabulator grid library，特别是React implementation of it。没什么关系，只是想注意一下。

该代码在 100％的情况下无需使用子组件链接即可工作，因此问题不存在。

Journals中的网格生成器创建一个表，该表具有链接单元，这些链接单元通向Journal组件。

链接组件生成良好，只是由于我不知道的原因而无法正常工作。

CodeSandbox

如果您将formatter组件的columns中的Journal行注释掉，则该应用程序将再次运行。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/layout/Header';
import Dashboard from './components/pages/Dashboard';
import Journals from './components/pages/Journals';
import Journal from './components/pages/Journal';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <div className="content">
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/journals" component={Journals} />
              <Route path="/journals/:key" component={Journal} /> //    <------ ROUTE IS HERE
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Journals.js

import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom';
import { ReactTabulator } from 'react-tabulator'
import "tabulator-tables/dist/css/tabulator.min.css";
import { reactFormatter } from 'react-tabulator';

function Journals() {

    const [journals, setJournals] = useState([]);

    useEffect(() => {
        fetch("http://localhost:4000/journals")
            .then(res => res.json())
            .then(data => {
                setJournals(data)
            })
            .catch(err => err);
    }, []);

    const JournalLink = (props) => {
        const cellData = props.cell._cell.row.data;
        let key = cellData.key_
        let link = `/journals/${key}`
        return <Link to={link}>{key}</Link>; //    <------ LINK COMPONENT IS HERE
    }

    const columns = [
        {
            title: "Number", 
            field: "key_", 
            formatter: reactFormatter(<JournalLink />) //    <------ LINK COMPONENT USED HERE
        },
        { title: "Date", field: "date_" },
    ];

    return (
        <div>
            <h1>Journals</h1>
            <ReactTabulator
                data={journals}
                columns={columns}
                tooltips={true}
                layout={"fitData"}
            />
        </div >
    )
}

export default Journals;

reactFormatter usage example
reactFormatter definition

Journal.js

import React, { useState, useEffect } from "react";
import { ReactTabulator } from 'react-tabulator'
import "tabulator-tables/dist/css/tabulator.min.css";

function Journal(props) {

    const [journalItems, setJournalItems] = useState([]);

    const initialFormJournalItems = {
        id: "",
        journalId: "",
        companyId: "",
        documentKey: "",
        documentDate: "",
        debitAccount: "",
        debit: "",
        creditAccount: "",
        credit: ""
    }

    const [formJournalItems, setFormJournalItems] = useState(initialFormJournalItems);

    useEffect(() => {
        fetch(`http://localhost:4000/journals/${props.match.params.key}`)
            .then(res => res.json())
            .then(data => {
                setJournalItems(data)
            })
            .catch(err => err);
    }, []); 

    const columns = [
        { title: "Document", field: "documentKey" },
        { title: "Date", field: "documentDate" },
    ];

    return (
        <div>
            <h1>Journal</h1>
            <ReactTabulator
                data={journalItems}
                columns={columns}
                tooltips={true}
                layout={"fitData"}
            />
        </div >
    )
}

export default Journal;

Answer 1

反应制表器 "/bin/cat /dev/null >/Users/mmoha070/Library/Developer/CoreSimulator/Devices/AC24D39E-8290-4314-90F6-685007DBACA8/data/tmp/detox.last_launch_app_log.out 2>/Users/mmoha070/Library/Developer/CoreSimulator/Devices/AC24D39E-8290-4314-90F6-685007DBACA8/data/tmp/detox.last_launch_app_log.err && SIMCTL_CHILD_DYLD_INSERT_LIBRARIES="/Users/mmoha070/Library/Detox/ios/34981937206ec401dcf4fd6235cf1a8a3f71e719/Detox.framework/Detox" /usr/bin/xcrun simctl launch --stdout=/tmp/detox.last_launch_app_log.out --stderr=/tmp/detox.last_launch_app_log.err AC24D39E-8290-4314-90F6-685007DBACA8 com.7ElevenNow.qa.PhoenixiOS --args -detoxServer ws://localhost:53701 -detoxSessionId 34083615-b6f2-86ea-3b33-84b27024f951" failed with code = 1, stdout and stderr: detox[75658] ERROR: [exec.js/EXEC_FAIL, #6] com.7ElevenNow.qa.PhoenixiOS: -1 detox[75658] ERROR: [exec.js/EXEC_FAIL, #6] An error was encountered processing the command (domain=FBSOpenApplicationServiceErrorDomain, code=1): The request to open "com.7ElevenNow.qa.PhoenixiOS" failed. The request was denied by service delegate (SBMainWorkspace) for reason: Unspecified. Underlying error (domain=FBSOpenApplicationErrorDomain, code=1): The operation couldn’t be completed. (FBSOpenApplicationErrorDomain error 1.)与反应路由器库不兼容。

https://github.com/ngduc/react-tabulator/blob/0.10.3/lib/Utils.js#L30

从源代码开始，

reFormatter

格式化元素的渲染使用function reactFormatter(JSX) { return function customFormatter(cell, formatterParams, onRendered) { //cell - the cell component //formatterParams - parameters set for the column //onRendered - function to call when the formatter has been rendered onRendered(function () { var cellEl = cell.getElement(); var CompWithMoreProps = React.cloneElement(JSX, { cell: cell }); react_dom_1.render(CompWithMoreProps, cellEl.querySelector('.formatterCell')); }); return '<div class="formatterCell"></div>'; }; }函数将格式化元素直接渲染为与父元素隔离的DOM。

需要对 react-tabulator 进行修复以支持此用例。一种方法是让ReactDOM.render返回一个自定义组件，该组件提供了一种从外部设置其状态的方法。然后customFormatter可以调用此函数来设置onRendered。

在一切正常的情况下，在路由器错误之外进行链接

1 个答案: