如何使用反应钩子将附加字符串呈现到 html

Question

代码如下：

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>
    );
};

我在这里要做的是将字符串 <span class="digit current-digit count">0</span> 呈现为 html 代码。因为当我尝试控制 digitContainer.current 时，值是字符串而不是 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>

Answer 1

根据您的previous question，我假设它不仅仅是span。

您根本不会为此使用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>
    );
};

我猜你的下一步是对这些元素做一些事情。如果是这样，您可能希望在状态信息中包含一个数组，其中包含数组中每个 i 的信息，并根据该数组的当前状态进行渲染。在这种情况下，您可能（再次）使数组处于状态，然后在渲染时使用map：

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>
    );
};

这里的关键是：不要在 HTML/标记中思考。考虑状态信息，然后根据需要渲染状态信息。

---

注意我在上面添加到i 元素中的key 属性。有关key 属性的更多信息，请参阅this page in the documentation。如果您可以使用比索引更有机的东西，那将是最好的，但我没有看到任何可以用于此目的的东西。

Answer 2

你可以使用dangerouslySetInnerHTML来渲染innerHTML

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