如何正確導出一個 React 組件

Question

我做了以下代碼，React 的新手，但它似乎並沒有在這里出錯：

// React 16.x code below
import React from 'react';

// Create the Label React component here

function Label(props){
    var c = "color:'" + props.color + "'";
    return <div style="{c}">{props.value}</div>
}

// Modify this function if you want to change the preview
// It will not be evaluated as part of the assessment
export function Preview() {
    return <Label value={'Solution'} color={'blue'} />;
    // ReactDOM.render()
}

// Do not change
export default Label;

Answer 1

style道具接受 object，請參閱相關文檔。

style 屬性接受帶有駝峰式屬性的 JavaScript object 而不是 CSS 字符串。

function Label(props) {
  return <div style={{ color: props.color }}>{props.value}</div>;
}