如何重用具有不同状态的 React 组件

Question

我正在创建一个列表，显示具有不同输入的不同行。不同的输入以 selected 为条件，但我的问题是它们在所有行中都发生了变化……我不知道该怎么做。

一个例子：

我有一个 parent 元素（橙色），根据第一个 select 元素中的 selected，child 变化（蓝色）。

Parent and child element screenshot

但问题是，当我select一个选项时，不同行的所有children都会改变（蓝色）。

The problem screenshot

此处，parent组件代码：

class FilterByDateCondition extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dateTypeCondition: "calendar",
        };
    }

    componentDidMount() {
        $('.date-condition-select').select2({
            width: '100%',
                minimumResultsForSearch: Infinity,
        })

        const s = this;
        $('.date-type-condition-select').select2({
            width: '100%',
            minimumResultsForSearch: Infinity,
        }).on("select2:select", function (e) {
            let state = s.state;
            state.dateTypeCondition = $(this).val();
            s.setState(state);
        });
    }

    _drawDateTypeCondition(dateTypeCondition) {
        if (dateTypeCondition == "calendar") {
            return <DateCalendar/>
        }
        else if (dateTypeCondition == "expression") {
            return <DateExpression/>
        }
    }

    render() {
        return (<div className="row">
                <div className="col-md-3">
                    <select className="date-type-condition-select">
                        <option value="calendar">{gettext("Calendar")}    </option>    
                        <option value="expression">{gettext("Expression")}</option>
                    </select>
                </div>
                <div className="col-md-2">
                    <select className="date-condition-select">
                        <option value="<">{"<"}</option>
                        <option value=">">{">"}</option>
                        <option value="==">{"=="}</option>
                    </select>
                </div>
                <div className="col-md-7">
                    {this._drawDateTypeCondition(this.state.dateTypeCondition)}
                </div>
            </div>
        );
    }
}

子组件显示在函数中_drawDateTypeCondition

如何复用组件？？

非常感谢！！！ : ]

Answer 1

我认为这与您使用的class有关。两个父组件中的 select 标签具有相同的 class 并且由于您正在使用 class select 或在 componentDidMount 函数中触发一个动作，它哪个 select 是 select 并不重要，只要它有那个 class.

我认为更好的方法是使用不同的标识符或将 onClick 或 onSelect 事件添加到触发单独定义的成员函数的 select 标记。

我希望这是有道理的。

如何重用具有不同状态的 React 组件

How reuse react component with different states

javascript

code-reuse

reactjs