0

我正在使用 Blockly 并尝试使用 React.Fragment 动态呈现。在<React.Fragment></React.Fragment>.

我有一个数组 var blocks = []; .... blocks.push(<Block type="${blockName}" />);，我正在尝试将它们呈现在React.Fragment中，例如：

return (<Fragment>{ruleBlocks.map((x) => <Block type={x} />)} </Fragment>);

……

<Category id="rules" colour="210" name="Product Rules"><ProductRuleBlock ruleTypes={productRuleBlocks} /></Category>

这不会渲染。 但是，如果我从数组中获取完全相同的内容并将其单独放入 React.Fragment 中，它将呈现。

<Fragment><Block type="item1" /><Block type="item2" /></Fragment>

为什么将项目单独放入但是当尝试使用array.map()内部生成它时不会渲染？

代码：

   const { ruleTypes } = props;  
    const [ruleBlocks, setRuleBlocks] = useState([]);

    useEffect(() => {
        var blocks = [];

        if (!ruleTypes)
            return;

        ruleTypes.forEach(ruleType => {
            var blockName = "product_rule" + ruleType.id;

            var productRule = {
                "type": blockName,
                "message0": ruleType.name + " %1",
                "args0": [
                    {
                        "type": "input_value",
                        "name": "valueInput",
                        "align": "CENTRE"
                    }
                ],
                "previousStatement": null,
                "nextStatement": null,
                "colour": 230,
                "tooltip": "",
                "helpUrl": ""
            };

            Blockly.Blocks[blockName] = {
                init: function () {
                    this.jsonInit(productRule);
                }
            };

            Blockly.JavaScript[blockName] = function (block) {
                var blockData = JSON.parse(block.data);
                return [blockData.now, Blockly.JavaScript.ORDER_NONE];
            };

            blocks.push(`<Block type="${blockName}" />`);
        });
        setRuleBlocks(blocks);
    }, [props.ruleTypes]); 
    return (<Fragment>
        {ruleBlocks.map((x) => <Block type={x} />)}
    </Fragment>);
4

0 回答 0