反応コンポーネント内のマップされたリストスタイルプロパティを動的に変更します

Question

マッピングとフィルタリングによって順序付けられていないリストに表示されているすべての名前付き色のdefautProps配列があります。私は既に各色の名前を表示していますが、その名前付きの色をインラインスタイルタグのbackgroundColorとして使用したいと思います。失敗したインラインスタイルコードが以下に含まれています。ご意見ありがとうございます。

ここ

class JSexp extends React.Component { 
    constructor (props) { 
    super(props); 

    this.state = { 
     filterBy: '' 
    }; 
    } 

    filterColors =() => { 
    const clr = document.getElementById('filter').value; 
    this.setState({ filterBy: clr}) 
    } 

    getColor = (idx) => { 
    return this.props.allColors[idx] 
    } 

    render() { 
    const arr = this.props.allColors; 
    const filterBy = clr => clr.includes(this.state.filterBy); 
    const backgroundColor = this.getColor(16) 


    const style = { 
     width: '20px', 
     height: '20px', 
     backgroundColor: this.getColor({idx}) 
    } 

    const colors = arr.filter(filterBy).map((color, idx) => 
    (
     <li key={idx}>{color} <div style={style} id={idx} /> </li> 
    )); 

    return (
     <div> 
     <h3>Named Colors</h3> 
     <ul> 
      {colors} 
     </ul> 
     <input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input> 
     </div> 
    ); 
    } 
} 

JSexp.defaultProps = { 
    allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", 
    "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", 
    "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", 
    "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", 
    "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", 
    "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", 
    "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", 
    "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", 
    "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", 
    "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", 
    "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", 
    "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", 
    "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", 
    "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", 
    "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", 
    "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", 
    "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", 
    "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", 
    "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", 
    "Yellow", "YellowGreen"] 
}; 

Answer 1

const style = { 
    width: '20px', 
    height: '20px', 
    backgroundColor: this.getColor({idx}) 
} 

あなたは{} IDX値が欠落しているように思えます。

は私が正しくあなたの質問を理解していれば、あなたは、配列のマッピングを行うとき、あなたはDIVののbackgroundColorを割り当てることができます

const colors = arr.filter(filterBy).map((color, idx) => { 
    const style = { 
     width: '20px', 
     height: '20px', 
     backgroundColor: this.getColor({idx}) 
    } 

    return <li key={idx}>{color} <div style={style} id={idx} /> </li> 
)}); 

Answer 2

を試してみてください。

class JSexp extends React.Component { 
 
    constructor (props) { 
 
    super(props); 
 

 
    this.state = { 
 
     filterBy: '' 
 
    }; 
 
    } 
 

 
    filterColors = (e) => { 
 
    this.setState({ filterBy: e.target.value}) 
 
    } 
 

 

 
    render() { 
 
    const arr = this.props.allColors; 
 
    const filterBy = clr => clr.includes(this.state.filterBy); 
 

 
    const colors = arr.filter(filterBy).map((color, idx) => 
 
     <li key={idx}> 
 
      {color} 
 
      <div style={{width: 20, height: 20, backgroundColor: color}}> 
 
      </div> 
 
     </li> 
 
    ); 
 

 
    return (
 
     <div> 
 
     <input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input> 
 
    
 
     <h3>Named Colors</h3> 
 
     <ul> 
 
      {colors} 
 
     </ul> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
JSexp.defaultProps = { 
 
    allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", 
 
    "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", 
 
    "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", 
 
    "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", 
 
    "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", 
 
    "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", 
 
    "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", 
 
    "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", 
 
    "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", 
 
    "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", 
 
    "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", 
 
    "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", 
 
    "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", 
 
    "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", 
 
    "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", 
 
    "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", 
 
    "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", 
 
    "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", 
 
    "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", 
 
    "Yellow", "YellowGreen"] 
 
}; 
 

 
ReactDOM.render(<JSexp />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 3

まあ、良い睡眠の後、私はこの問題は何であったかを見つけ出すんでした。実際には思ったよりもはるかに簡単でした：

class NamedColors extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     filterBy: '' 
    }; 
    } 

    filterColors =() => { 
    const clr = document.getElementById('filter').value; 
    this.setState({ filterBy: clr }) 
    } 

    render() { 

    const itemStyle = { 
     fontSize: '.85rem', 
     padding: '5px' 
    } 

    const contentDisplay = { 
     display: 'flex', 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     padding: '5px' 
    } 

    const contentHeader = { 
     display: 'flex', 
     alignItems: 'baseline' 
    } 

    const arr = this.props.allColors; 

    const filterBy = (strToFilter) => { 
     return strToFilter.includes(this.state.filterBy) 
    }; 

    const colors = arr.filter(filterBy).map((color, idx) => 
     (
     <div key={idx + 10}> 
      <div key={idx} style={itemStyle}> 
      {color} 
      <div style={ 
       { 
       backgroundColor: color, 
       width: '150px', 
       height: '32.5px', 
       border: 'solid', 
       borderWidth: '1px' 
       } 
      } /> 
      </div> 
     </div> 
    )); 

    return (
     <div> 
     <div style={contentHeader}> 
      <h3>Named Colors</h3>&nbsp;&nbsp;&nbsp; 
      <input type="text" placeholder="Filter by" id="filter" onChange={this.filterColors}></input> 
     </div> 
     <div style={contentDisplay}> 
      {colors} 
     </div> 
     </div> 
    ); 
    } 
} 

NamedColors.defaultProps = { 
    allColors: ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", 
    "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", 
    "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", 
    "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", 
    "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", 
    "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", 
    "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", 
    "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", 
    "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", 
    "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", 
    "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", 
    "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", 
    "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", 
    "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", 
    "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", 
    "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", 
    "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", 
    "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", 
    "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", 
    "Yellow", "YellowGreen"] 
};