javascript - 使用函数写入 HTML

Question

想要创建一个函数 writeToDetails(text) 存储在文件 details.js 中，无论如何都可以写入我的 App.js 文件它的调用位置。

到目前为止我已经:写了:

export function writeToDetails(text){
    var details = [];

    details.push(text);

    for(int i = 0; i<details.length; i++){
      //I can imagine the writing of the data would go here
    }
}

我想知道我必须写什么才能使这项工作成功。

为了完整起见，这是我的 App.js 文件:

import React,{ Component } from 'react';
import ReactDom from 'react-dom';
import './App.css';
import {parseAddress} from './TokenBalance.js'
import {distribute} from './distribute.js'
import {depositToSc} from './depositToSc.js'
import {deploySC} from './deploySC.js'
import {writeToDetails} from './writeToDetails.js'



class App extends Component {
  state = {
    sc: '',
    bytecode:'',
    writeToDetails:''
  };
  constructor(props) {
    super(props);
    this.state = {isEthTransferVisible: true, isGoDeployedVisible: false, isTransferToAddressVisible:false, isDistributeVisible:false};
    this.handleTransferFromEthereum = this.handleTransferFromEthereum.bind(this);
    this.handleDeploymentToGo = this.handleDeploymentToGo.bind(this);
    this.handleTransferToAddressVisible = this.handleTransferToAddressVisible.bind(this);
    this.handleDistributeVisible = this.handleDistributeVisible.bind(this);
  }

 async handleTransferToAddressVisible() {
      await depositToSc()
      this.setState(prevState => ({
        isDistributeVisible: !prevState.isDistributeVisible,
      }));
  }

  async handleDistributeVisible() {
        await distribute();
        this.setState(prevState => ({
        isTransferToAddressVisible: !prevState.isTransferToAddressVisible,
        isDistributeVisible: !prevState.isDistributeVisible,
      }));
  }

  async handleDeploymentToGo() {
        await deploySC(this.state.bytecode);
        this.setState(prevState => ({
          isGoDeployedVisible: !prevState.isGoDeployedVisible,
          isTransferToAddressVisible: !prevState.isTransferToAddressVisible
        }));
  }

  async handleTransferFromEthereum(){
       await parseAddress(this.state.sc);
       this.setState(prevState => ({
        isEthTransferVisible: !prevState.isEthTransferVisible,
        isGoDeployedVisible: !prevState.isGoDeployedVisible
      }));
  }

  render(){
      const {sc,bytecode, writeToDetails} = this.props
      return (
      <div className="App">
        <header className="App-header">
            <p>
              { this.state.isEthTransferVisible && <input type ="text"
                placeholder="Smart Contract"
                name="name" id ="smartcontract"
                className="nice-textbox"
                value={sc}
                onChange={event=> this.setState({sc:event.target.value})}
                />
              }
              { this.state.isEthTransferVisible && <button id="button"
                onClick={() => { parseAddress(this.state.sc);}, this.handleTransferFromEthereum}>Check Balances</button>
              }


              { this.state.isGoDeployedVisible && <input type ="text"
                placeholder="Smart contract Bytecode"
                name="name" id ="scbytecode"
                className="nice-textbox"
                value={bytecode}
                onChange={event=> this.setState({bytecode:event.target.value})}
                />
              }
              { this.state.isGoDeployedVisible && <button id="button"
                onClick={() => { deploySC(this.state.bytecode); }, this.handleDeploymentToGo}> Deploy Sc</button>
              }


              { this.state.isDistributeVisible && <button id="button"
                onClick={() =>{depositToSc()}, this.handleDistributeVisible}> Distribute</button>
              }


              { this.state.isTransferToAddressVisible && <button id="button"
                onClick={() => {distribute()}, this.handleTransferToAddressVisible}> Deposit</button>
              }
              <p className= "details"> Get more details </p>
              <div className="expandDetails"></div>

            </p>
        </header>
    </div>
    );
  }
}

// Render it
ReactDom.render(
  <App/>,
  document.getElementById("root")
);

export default App;

Answer 1

如果要修改App.js，可以使用高阶组件

export wrapperComponent = function(component) {
  return class extends React.Component {
    ......
  }

如果需要多个文件在一起，可以在index.js中全部导出，需要的地方可以导入