Reactjs 如何使用react钩子将追加字符串呈现到html

代码如下：

const Gauge = (props) => {
    const points = 100;
    const radius = 257;
    const max = 100;
    const peaks = [ 10, 50, 90 ];
    const step = (max + 1) / points;
    const realPeaks = peaks.map((peak) => Math.floor(peak * (1 / step)));
    const hueStep = 120 / points;

    const digitContainer = useRef(null);
    const innerContainer = useRef(null);

const [digits, setDigits] = useState(props.item.temperature);
    useEffect(() => {
        digitContainer.current.append(`<span class="digit current-digit count">0</span>`);



for (let i = 0; i < points; i++) {
        const degree = i * (radius / (points - 1)) - radius / 2;
        const isPeak = realPeaks.indexOf(i) > -1;
        innerContainer.current.append(`<i className="bar${isPeak ? ' peak' : ''}" style="transform: rotate(${degree}deg)"></i>`);

        const intStep = Math.ceil(step * i);
        const intNextStep = Math.ceil(step * (i + 1));
    }
        console.log(digitContainer.current);
    }, []);

    return (
        <div className={style['gauge']} data-digit={digits}>
            <div ref={digitContainer}></div>
<div ref={innerContainer}></div>
        </div>
    );
};

我在这里尝试的是将字符串0呈现为html代码。因为当我尝试控制台digitContainer.current时，值是string而不是html

输出如下：

<div className="gauge data-digit{digits}">
    <div>
      '<span class="digit current-digit count">0</span>'
    </div>
    <div>
    '<span>......</span>'
    '<span>......</span>'
    '<span>......</span>'
    '<span>......</span>'
    '<span>......</span>'
    '<span>......</span>'
    '<span>......</span>'
    </div>
    </div>

反而

<div className="gauge data-digit{digits}>
    <div>
      <span class="digit current-digit count">0</span>
    </div>
    <div>
    <span>......</span>
    <span>......</span>
    <span>......</span>
    <span>......</span>
    <span>......</span>
    <span>......</span>
    <span>......</span>
    </div>
    </div>

您可以使用危险的LySetinerHTML来呈现innerHTML

const innerHTML = '<span class="digit current-digit count">0</span>'
function MyComponent() {
  return <div dangerouslySetInnerHTML={innerHTML} />;
}

基于你的观点，我假设它不仅仅是跨度

你根本不会使用useEffect。相反，您可能会使用一个数组，然后在最后的JSX中使用该数组：

const Gauge = (props) => {
    const points = 100;
    const radius = 257;
    const max = 100;
    const peaks = [ 10, 50, 90 ];
    const step = (max + 1) / points;
    const realPeaks = peaks.map((peak) => Math.floor(peak * (1 / step)));
    const hueStep = 120 / points;

    // Build the array
    const digits = [];
    for (let i = 0; i < points; i++) {
        const degree = i * (radius / (points - 1)) - radius / 2;
        const isPeak = realPeaks.indexOf(i) > -1;
        digits.push(<i key={i} className={`bar${isPeak ? ' peak' : ''}`} style={{transform: `rotate(${degree}deg)`}}/>);
    }

    // Use it below
    return (
        <div>
            <div>
            <span key="count" class="digit current-digit count">0</span>
            {digits}
            </div>
        </div>
    );
};

这里的关键是：不要用HTML/标记进行思考。根据状态信息进行思考，然后根据需要呈现状态信息

---

注意我在上面的I元素中添加的key属性。有关键属性的详细信息，请参见。如果你可以使用比索引更有机的东西，那就最好了，但我没有看到任何东西可以用于这个目的。

你为什么要这样做，而不是一开始就将跨度包括在div中？你可以，但没有很好的理由这样做，还有很多很好的理由不使用。我不使用useEffect可以吗？。例如，我有1个数据，然后每5分钟更新一次信息。我更新了代码并添加了信息。这确实是一个更好的方法way@BeginnerCoder-我已经更新了答案。只有在组件挂载后需要执行某些操作，然后可选地响应事件处理程序未处理的事件时，才需要useEffect。希望以上内容能让你朝着正确的方向前进。这里的关键是：不要用HTML/标记进行思考。根据状态信息进行思考，然后根据需要呈现状态信息。

const Gauge = (props) => {
    const points = 100;
    const radius = 257;
    const max = 100;
    const peaks = [ 10, 50, 90 ];
    const step = (max + 1) / points;
    const realPeaks = peaks.map((peak) => Math.floor(peak * (1 / step)));
    const hueStep = 120 / points;
    const [digits, setDigits] = useState([]);

    // ...things here to fill in `digits` via `setDigits` in response to
    // various things (perhaps an initial `useEffect` if loading them
    // from somewhere)...

    // Use it below
    return (
        <div>
            <div>
            <span key="count" class="digit current-digit count">{digits.length}</span>
            {digits.map(digit => <i key={digit.someUsefulKey} className={`bar${digit.isPeak ? " peak" : ""}`} style={{transform: `rotate(${degree}deg)`}}/>)}
            </div>
        </div>
    );
};