Đặt tiêu đề cấp với đạo cụ phản ứng

Question

Chỉ cần tự hỏi liệu có cách nào để đặt mức tiêu đề bằng cách chuyển đạo cụ xuống thành phần cơ sở hay không.

Ví dụ:

cơ sở Component

class Heading extends Component { 
render() { 
    return (
    <h{this.props.headinglevel} className={this.props.titleStyle}> 
     {this.props.title} 
    </h{this.props.headinglevel}> 
); 
} 
} 
export default Heading; 

Component Chánh (Đi qua Props)

class HomeHeader extends Component { 
render() { 
    return (
     <Heading headinglevel="1" titleStyle="big-header" title="Hello World" /> 
) 
} 
} 

export default HomeHeader; 

Khi tôi cố gắng này, tôi nhận được một lỗi cú pháp.

Answer 1

Yup! Cách tạo thẻ của bạn biến là như vậy:

render() { 
    const Tag = 'h1'; 
    return <Tag>{/* some code here */}</Tag>; 
} 

Lưu ý rằng Tag được viết hoa. Đó là yêu cầu yêu cầu bạn viết hoa một biến thẻ để React hiểu rằng nó không chỉ là một phần tử HTML bình thường.

Vì vậy, trong trường hợp của bạn, bạn có thể làm một cái gì đó như: (. Nếu bạn đang được an toàn, bạn có thể muốn thêm một số kiểm tra để this.props.headinglevel chỉ có thể là 1-6)

render() { 
    const Tag = 'h' + this.props.headinglevel; // make sure this has a default value of "1" or w/e 
    return (
    <Tag className={this.props.titleStyle}> 
     {this.props.title} 
    <Tag> 
); 
} 

---