在 React 中动态构建渲染函数

Question

我有如下渲染功能。我正在从我们当前的站点获取一个开源库并将其构建到 react 中，它会创建一个颜色选择器（当我们开始工作时），http://www.booneputney.com/jquery-hex-colorpicker.html Demo 1。我们希望继续使用它，因为它是一种很好的简单颜色选择器。

我试图将选择器的动态构建移动到 render() 函数中的唯一问题。我对 React 相当陌生，我已经到处搜索了答案......但它会在浏览器中呈现标签等。

undefined</div><div className = "picker-sidebar">
</div><div className = "picker-form-wrapper"><form className = "picker-form" onsubmit=
{this.submitColorChoice}><input type="text" name="selected-color" className = 
"selected-color" readonly="readonly"/><input type="submit" value="OK" name="submit" 
className = "submit"/></form></div></div>

有什么解决办法吗？

感谢您的帮助。

    render() {
        let output;
        {


            for (let row = 0; row < this.state.settings.maxBlocks; row++) {
                let blocksCount = this.state.settings.size + row;
                if (row >= this.state.settings.size) {
                    blocksCount = this.state.settings.size * 2 - (row - this.state.settings.size + 2);
                }
                output += "<div className = 'picker-row'>";
                for (let block = 0; block < blocksCount; block++) {
                    let y = centerBlock - row;
                    let x = -centerBlock + (block + (this.state.settings.maxBlocks - blocksCount) / 2);
                    let radius = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
                    let normRadius = radius / maxRadius;
                    angle = Math.atan(y / x) * 180 / Math.PI + 90;
                    if (x >= 0) {
                        angle += 180;//compensate for right 2 quadrants
                    }
                    if (settings.colorModel === "hsv") {
                        valueLightness = 1;
                    } else {
                        valueLightness = 0.5;
                    }
                    if (normRadius === 0) {
                        angle = 0;
                    }//force angle to prevent undefined
                    output += "<div className = 'color-block' style='background-color:" + this.colorizeBlock(normRadius, angle, valueLightness) + "'></div>";
                }
                output += "</div>";
            }
            output += "</div>";
            output += '<div className = "picker-sidebar">';
            for (let row = 0; row < this.state.settings.maxBlocks; row++) {
                output += "<div className = 'color-block'></div>";
            }
            output += '</div>';
            output += '<div className = "picker-form-wrapper"><form className = "picker-form" onsubmit={this.submitColorChoice}>' +
                '<input type="text" name="selected-color" className = "selected-color" readonly="readonly"/>' +
                '<input type="submit" value="OK" name="submit" className = "submit"/>' +
                '</form></div>';
            output += "</div>";//end of hex-color-picker-wrapper
        }
        const colourPicker = <React.Fragment>{output}</React.Fragment>
        return (colourPicker)
    }

Answer 1

您好像错过了打开<div>。您可以在output 声明中添加它

UPD

 render() {
    let output; // output equals undefined here
    ...
    output += "<div className = 'picker-row'>"; // here you concatenate undefined and <div>

这就是浏览器呈现undefined</div><div className = "picker-sidebar"> ... 的原因。 输出变量应该用开始标签初始化。根本没有谈论片段和 React。

Answer 2

解决方案涉及使用数组，然后将元素列表放置在父元素中，而不是仅仅将结果附加到字符串。

注意确保为每个元素提供一个唯一的键，否则在某些情况下你会从 React 中得到错误。

为了清楚起见，当您不希望在组件周围使用包装 div 时，请使用 ...。

我希望这对将来的某人有所帮助。

    createColorPicker() {
        let wrapper_container = []; // main wrapper
        let color_picker_container = [];
        let picker_container = [];
        let picker_side_container = [];
        let picker_bottom_container = [];
        let picker_row_container = [];
        let row;
        for (row = 0; row < this.state.settings.maxBlocks; row++) {
            
                children_blocks.push(<div key = {"row-" + row + "color-block-" + key_block}>

                </div>);
                key_block++;
            }
            picker_row_container.push(<div key = {"row-block-" + row}
                                           className = 'picker-row'> {children_blocks}</div>);
        }
        let sideColorBlock = [];
        let key_i = 1
        for (let row = 0; row < this.state.settings.maxBlocks; row++) {
            sideColorBlock.push(<div  className = 'color-block'> </div>);
            key_i++;
        }
        picker_container.push(<div key = "container-1" className = 'color-picker-container'>
            {picker_row_container}
        </div>)
        picker_side_container.push(<div key = "container-2" className = "picker-sidebar">{sideColorBlock}</div>);
        picker_bottom_container.push(
            <div key = "container-3" className = "picker-form-wrapper">
                <form className = "picker-form" onSubmit = {}>
                    <input type = "text" name = "" className = "" />
                    <input type = "submit" value = "OK" name = "submit" className = "submit"/>
                </form>
            </div>);
        wrapper_container.push(<div key = "wrapper-container" className = 'hex-color-picker-wrapper'>
            {picker_container}{picker_side_container}{picker_bottom_container}
        </div>)
        return wrapper_container;
    }