如何为数组中的异步选择设置样式边框颜色 - React Native？答案

【问题标题】：How to set style borderColor for AsyncSelect from array - ReactNative?如何为数组中的异步选择设置样式边框颜色 - React Native？
【发布时间】：2019-07-31 11:36:26
【问题描述】：

我有一组 AsyncSelect 组件。如何为数组的一个 AsyncSelect 设置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>
    );
};

【问题讨论】：

你可能会喜欢这篇文章，stackoverflow.com/a/51844542/1626878
此代码将红色背景添加到列的所有元素。我需要为行中的 AsyncSelect 之一设置背景颜色。
async-select-with-callback 类中有什么？你不能在这个 CSS 中设置颜色吗？
如何渲染数组？您使用的是地图还是类似的东西？

标签： react-native

【解决方案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>
}

【讨论】：