ReactJS href 属性的 collapse 不能取 props 值

Question

当我点击 Collapse.js 里面的按钮时，必须显示 Card 组件。但它不会将 'props.href1' 放入 href 属性中。它给出了这个错误：

第 11:20 行：解析错误：意外标记，应为“...” 11 | href="#"{this.props.href1}

这是App.JS

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Collapse from "./components/Collapse";
import Card from "./components/Card";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Collapse href1 = "cardhref" >
        <Card cardTitle="Barcelona" />
      </Collapse>
      <div className="card-group">
        <Card cardTitle="Man.City" />
        <Card cardTitle="Chelsea" />
        <Card
          cardTitle="Madrid"
          image="https://picsum.photos/id/237/200/300"
        />
      </div>
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

export default App;

这是Collapse.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Collapse = (props) => {
  return (
    <div>
        {console.log(props.children)}
      <p>
        <a className="btn btn-primary"
          data-bs-toggle="collapse"
          href="#"{this.props.href1} 
          role="button"
          aria-expanded="false"
          aria-controls="collapseExample">
          Link with href
        </a>
        <button className="btn btn-primary"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target={this.props.href1}
          aria-expanded="false"
          aria-controls="collapseExample">
          Button with data-bs-target
        </button>
      </p>
      <div className="collapse" id = {this.props.href1} >
        <div className="card card-body">
          {this.props.children}
        </div>
      </div>
    </div>
  );
};
export default Collapse;

Answer 1

改为

href={`#${props.href1}`}

ReactJS href 属性的 collapse 不能取 props 值

ReactJS href attribute of collapse can't take props value

javascript

href

reactjs

bootstrap-4

react-component