大佬教程收集整理的这篇文章主要介绍了如何使用反应钩子将附加字符串呈现为 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>
);
};
我在这里要做的是将字符串 <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>
根据您的 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,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/标记中思考。从状态信息的角度考虑，然后根据需要渲染状态信息。
注意我在上面的 key 元素中添加的 i 属性。有关 key 属性的更多信息，请参阅 this page in the documentation。如果您可以使用比索引更有机的东西，那将是最好的，但我没有看到可以用于此目的的任何内容。
您可以使用 dangerouslySetInnerHTML 来呈现 innerHTML
const innerHTML = '<span class="digit current-digit count">0</span>'
function MyComponent() {
return <div dangerouslySetInnerHTML={innerHTML} />;
}
以上是大佬教程为你收集整理的如何使用反应钩子将附加字符串呈现为 html全部内容，希望文章能够帮你解决如何使用反应钩子将附加字符串呈现为 html所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。