使用变量url创建href

fre*_*red 0 html javascript reactjs

场景:

  • 尝试创建具有可变URL位置的网页.
  • 目前,代码旨在将您发送到名为asdf.txt的文件, 但是我希望能够将URL从asdf.txt更改为somethingelse.txt.
  • 下面是现在的代码,下面是我尝试更改文件名失败.

请建议.
谢谢.

这是现在的代码:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">

class NameForm extends React.Component {
    render() {
        return (<a href="asdf.txt" onclick="$('a').hide()">this is a link</a>)
    }
}

ReactDOM.render(
    <NameForm />,
    document.getElementById('root')
);

</script>
</body>
Run Code Online (Sandbox Code Playgroud)

新守则:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">

class NameForm extends React.Component {
    render() {
        let name = "asdf" // this would be a more complicated proccess
        return (<a href=name+".txt" onclick="$('a').hide()">this is a link</a>)
    }
}

ReactDOM.render(
    <NameForm />,
    document.getElementById('root')
);

</script>
</body>
Run Code Online (Sandbox Code Playgroud)

Rag*_*arg 6

在反应中,没有HTML,只有JSX.请在JSX之间附上任何变量用法{}.

请试试这个:

return <a href={`${name}.txt`} onclick="$('a').hide()">this is a link</a>
Run Code Online (Sandbox Code Playgroud)