Question

我有一组AsyncSelect组件。如何为一个数组的AsyncSelect设置borderColor？

在某些情况下，它尝试为所有行设置此borderColor。

class ConditionBox extends Component {
    render() {
        return (
            <div>
                {cardsData.map(item => {
                    return (<ConditionItem {...item} />);
                })}
            </div>
        )
    }
}


class ConditionItem extends Component {

    constructor(props) {
        super(props);
    }


    render() {
        return (

            <div style={{display: 'block'}}>
                <div style={{display: 'inline-block', width: '250px', marginRight: '1em'}}>
                    <Label
                        htmlFor="date-to"
                        label="Task Owner:"
                    />

                    <AsyncSelect
                        className="async-select-with-callback"
                        classNamePrefix="react-select"
                        getOptionValue={getOptionValue}
                        onChange={onOwnerFieldChange}
                        defaultOptions
                        index={this.props.index}
                        loadOptions={loadOptions}
                        isSearchable={true}
                        defaultValue={getSelectedOption(this.props.index, 'owner')}
                        placeholder="Choose Task"
                    />
                </div>

                <div style={{display: 'inline-block', width: '150px', marginRight: '1em'}}>
                    <Label
                        htmlFor="date-to"
                        label="Type:"
                    />

                    <AsyncSelect
                        className="async-select-with-callback"
                        classNamePrefix="react-select"
                        getOptionValue={getOptionValue}
                        onChange={onOperationTypeFieldChange}
                        index={this.props.index}
                        defaultOptions={[
                            {
                                label:
                                    'Serial',
                                value: 'SL',
                            },
                            {
                                label:
                                    'Parallel',
                                value: 'PR',
                            },
                        ]}
                        isSearchable={false}
                        placeholder="Choose Type"
                        defaultValue={getSelectedOption(this.props.index, 'condition')}
                    />
                </div>

                <div style={{display: 'inline-block', width: '250px', marginRight: '1em'}}>
                    <Label
                        htmlFor="date-to"
                        label="Task Owned:"
                    />

                    <AsyncSelect
                        className="async-select-with-callback"
                        classNamePrefix="react-select"
                        getOptionValue={getOptionValue}
                        onChange={onOwnedFieldChange}
                        defaultOptions
                        loadOptions={loadOptions}
                        index={this.props.index}
                        isSearchable={true}
                        placeholder="Choose Task"
                        defaultValue={getSelectedOption(this.props.index, 'owned')}
                    />
                </div>

                <div style={{display: 'inline-block'}}>
                    <Button onClick={() => removeCondition(this.props)}>Remove</Button>
                </div>
            </div>
        )
    }
}


function rebuildCondtions() {

    cardsData.push({index: cardsData.length, owner: "", condition: "", owned: ""});

    ReactDOM.render(<ConditionBox/>, document.getElementById('conditionbox'));
}



export default () => {

    return (
        <div>
            <h3>Triangu Task Order</h3>
            <div style={{width: '90%', marginLeft: '7%'}}>

                <div style={{display: 'inline'}}>
                    <div id="conditionbox"/>
                </div>


                <div style={{paddingTop: '15px'}}>
                    <Button onClick={rebuildCondtions}>Add</Button>
                </div>

            </div>
        </div>
    );
};

Answer 1

这是一个例子，渲染数组时不要忘了键。

class ConditionBox extends Component {
    render() {
        return (
            <div>
                {cardsData.map(item => {
                    return (<ConditionItem {...item} key={item.id} isHighlighted={isItemHighlighted(item)}/>);
                })}
            </div>
        )
    }
}

class ConditionItem extends Component {

    constructor(props) {
        super(props);
    }


    render() {
        const borderColor = this.props.isHighlighted ? 'red' : 'black';
        return (

            <div style={{display: 'block', borderColor }}>
              /*...all other code, you can use 'borderColor' somewhere else as well...*/
            </div>
}

如何从数组-ReactNative为AsyncSelect设置样式borderColor？

1 个答案: