为什么要创建一个样式对象以给组件的样式显示ReaCJS中的随机错误？

Question

我想在容器类中添加样式，但是Mystyle正在显示错误？有什么问题，请帮忙！

import React from 'react'

导出默认函数（）{ 让Mystyle { 颜色：“白色”， 背景彩色：“ balck” } 返回 （ ＆lt;＆gt;

    <h1 className='my-3'>about me</h1>
            <div className="accordion accordion-flush" id="accordionFlushExample">
        <div className="accordion-item">
        <h2 className="accordion-header" id="flush-headingOne">
            <button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
            Accordion Item #1
            </button>
        </h2>
        <div stle={myStyle} id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the first item's accordion body.</div>
        </div>
        </div>
        <div className="accordion-item">
        <h2 className="accordion-header" id="flush-headingTwo">
            <button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
            Accordion Item #2
            </button>
        </h2>
        <div stle={myStyle} id="flush-collapseTwo" className="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
        </div>
        </div>
        <div className="accordion-item">
        <h2 className="accordion-header" id="flush-headingThree">
            <button stle={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
            Accordion Item #3
            </button>
        </h2>
        <div stle={myStyle} id="flush-collapseThree" className="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
            <div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
        </div>
        </div>
    </div>
</div>
<div className='container'> 
<button type="button" className="btn btn-primary my-3" >Primary</button>
</div>
</>

） }

Answer 1

这应该是

import React from "react";

export default function About() { let myStyle = { color:'white', backgroundColor:'black' } 
return ( <> <div>
<h1 className='my-3'>about me</h1>
<div className="accordion accordion-flush" id="accordionFlushExample">
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingOne">
<button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div stle={myStyle} id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the first item's accordion body.</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingTwo">
<button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div style={myStyle} id="flush-collapseTwo" className="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingThree">
<button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div style={myStyle} id="flush-collapseThree" className="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div className="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> className. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
</div>
<div className='container'> 
<button type="button" className="btn btn-primary my-3" >Primary</button>
</div>
</>
)}

您以错误的方式初始化的神秘性的，而

let myStyle = { color:'white', backgroundColor:'black' }

在DIV内部的样式参考时，

let myStyle { color:'white', backgroundColor:'balck' }

对于几个divs来说也是错误的，但它应该是样式的，但

也有一个div丢失，但可能是由于复制粘贴而引起的错误

阅读＆amp;用初始化的var编写程序:)