Reactcytoscape adds arrowheads to lines

look at the picture:

Code:

import {ReactCytoscape} from "react-cytoscape";
render(){
    ...
    return(
        ...
        {/*  */}
        <div className="insight-Right-chart">
            <ReactCytoscape containerID="cy"
                elements={this.getElements()}
                cyRef={(cy) => { this.cyRef(cy) }}
                cytoscapeOptions={{ wheelSensitivity: 0.1 }}
                layout={{ name: "cola",directed: true,padding: 10 }} />
        </div>
    )
}

question:

1. I am a beginner in cytoscape. Which configuration item should I modify if I want to draw a line with an arrow?
what are the attributes such as 2.cyRef, cytoscapeOptions and layout used for? I can"t find jquery on the official website.

New question:

1. Which attribute controls the display of text on the connection?

React.js cytoscape front-end data-visualization

Mar.13,2021

I'll ask and answer my own questions, which I just found and configured in style. Code directly :

render(){
    return (
        <ReactCytoscape containerID="cy"
        elements={this.getElements()}
        style={this.cyStyle()}
        cyRef={(cy) => { this.cyRef(cy) }}
        cytoscapeOptions={{ wheelSensitivity: 0.1,autounselectify: true,boxSelectionEnabled:         false, }}
        layout={{ name: 'random', }} />
    )
}

    cyStyle=()=>{
        return [
            {
                selector: 'node',
                css: {
                    'text-valign': 'center',
                    'text-halign': 'center'
                }
            },
            {
                selector: 'edge',
                css: {
                    // !!!!!!
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle'
                }
            },
            {
                selector: ':selected',
                css: {
                    'background-color': 'black',
                    'line-color': 'black',
                    'target-arrow-color': 'black',
                    'source-arrow-color': 'black'
                }
            }
        ]
    }

Previous: Js uses functional programming to convert strings into arrays. Every time you submit data, you have to manually refresh the page and cannot modify it on the original page. How to solve this problem?

Next: Vue-router switch pages, hoping that the scroll bar can go back to the top, is there any other way except scrollBehavior,?