Question

我具有如下的渲染功能。我正在从当前站点上获取一个开放源代码库，并将其构建为react，它创建了一个颜色选择器（当我们开始工作时），http://www.booneputney.com/jquery-hex-colorpicker.html演示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;
    }

在React中动态构建渲染功能

2 个答案: