Question

我尝试传递的以下道具无法点击/定向到指定的链接。我已经分别创建了一个JSON文件。下面是我的react组件

 <div className="card-action">
                      <a href="#{project.link}">View me on Github</a>
                    </div>

这就是我包含在JSON文件中的内容

  "link": "https://github.com/wyncode/joshua_matthew_michaela_nicole"

Answer 1

如果要呈现道具的价值，则需要将其放在“ {}”中，而不要用双引号引起来。

尝试一下（由于json数据中的链接为完整url，因此锚点'＃'在这里没有用）：

import TextField from "@material-ui/core/TextField";
import styled from "styled-components";

const StyledTextField = styled(TextField)`
  /* default */
  .MuiInput-underline:before {
    border-bottom: 2px solid green;
  }
  /* hover (double-ampersand needed for specificity reasons. */
  && .MuiInput-underline:hover:before {
    border-bottom: 2px solid lightblue;
  }
  /* focused */
  .MuiInput-underline:after {
    border-bottom: 2px solid red;
  }
`;

export default StyledTextField;

React prop未呈现链接

1 个答案: