将静态数据传递到React组件

Question

我想知道如何在需要接口的情况下将静态（硬编码）值传递给React Component，我只想只显示布局而不是数据，因为现在数据可以是静态的。

下面是我必须进行更改的代码，代码已经在其中，但是我不确定如何传递数据。

class News extends CmsComponent<IProps & IStateProps & DispatchProp<any>, {}> {
public render() {
    const {
        newsGroup,
        editMode,
        categoryId,
    } = this.props;

    /** Return isComponentLoaded null if newsGroup is not loaded */
    const isComponentLoaded = ((newsGroup === null) && (categoryId !== null && categoryId !== '-1')) ? null : true;

    return this.renderCmsComponent(newsGroup, editMode, this.renderComponent, isComponentLoaded);
}

private renderComponent = () => {
    const {
        newsGroup,
        control: {
            parameters,
        },
    } = this.props;

    const group = newsGroup.value;
    const hasChildren = (group.children.value.length || group.rssChildren.value.length);

    // Handle early exit if no news items are available. This ensures links don't render when news can be deleted to 0.
    if (!hasChildren || !group.active.value) {
        this.renderEmptyComponent('DoesNotExist');
    }

    const hasCssPropertySupport = CSSPropertyBrowserSupport('--css-vars');
    const classes = classNames(
        Classes.ID.NEWS,
        {
            [Classes.ID.NEWS_IE]: !hasCssPropertySupport,
        },
    );

    const constructedLink = `${group.displayUrl.value}UserNews.aspx`;
    const articles = this.getNews();
    const displayFormat = parameters.values.DisplayFormat || NewsDisplayFormat.Standard;
    const userProvidedHeading = parameters.values.Heading;
    const renderActionLinks = (group.showMore.value || !group.isRSS.value);

    return (
        <div className={classes}>
            {(group.title.value && displayFormat !== NewsDisplayFormat.Carousel) && (
                <ComponentHeadersHelper showBorder={true} text={userProvidedHeading.length ? userProvidedHeading : group.title.value} />
            )}
            {articles}
            {renderActionLinks && (
                <div className={Classes.ID.NEWS_CATEGORY_LINKS}>
                    {group.showMore.value && (
                        <Link href={group.displayUrl.value} title={''}>
                            {group.moreNewsText.value}
                        </Link>
                    )}
                    {!group.isRSS.value && isAllowed(newsGroup.value.permissionValue.value, Permissions.Create) && (
                        <Link href={constructedLink} title={''}>
                            {this.localise(NewsMessage.SubmitArticle)}
                        </Link>
                    )}
                </div>
            )}
        </div>
    );
}

/**
 * Generates list of all news articles for selected group
 */
private getNews() {
    const {
        newsGroup,
        control: {
            parameters,
        },
    } = this.props;

    const articlesArray: JSX.Element[] = [];
    const carouselArticles: NewsArticle.INewsArticle[] = [];
    const group = newsGroup.value;
    const isRss = group.isRSS.value;
    const children = (isRss ? group.rssChildren : group.children);
    const displayFormat = parameters.values.DisplayFormat || NewsDisplayFormat.Standard;
    const userProvidedHeading = parameters.values.Heading;

    const adminNewsLimit: number = newsGroup.value.numOfNewsItems.value;
    const isDefaultNoOfArticles = (parameters.values.NumberOfArticles === 'Default' || parameters.values.NumberOfArticles === '0');
    // if default / 0 is set in cms property dropdown. Use admin setting otherwise use value specified in CMS properties
    let noOfArticles: number = isDefaultNoOfArticles ? adminNewsLimit : parseInt(parameters.values.NumberOfArticles, 10);

    children.value.forEach(article => {
        if (article.isComplete && noOfArticles > 0) {
            if (displayFormat === NewsDisplayFormat.Carousel) {
                carouselArticles.push(article.value);
            }
            else if (displayFormat === NewsDisplayFormat.Headline || displayFormat === NewsDisplayFormat.HeadlinesMultiple || displayFormat === NewsDisplayFormat.HeadlinesSingle) {
                articlesArray.push(
                    <NewsHeadline
                        article={article}
                        key={article.value.id}
                    />,
                );
            }
            else {
                articlesArray.push(
                    <NewsCategoryThumbnail
                        article={article}
                        key={article.value.id}
                        showSummary={group.showSummary.value}
                        showThumbnails={group.showThumbnails.value}
                        category={group}
                    />,
                );
            }
            noOfArticles -= 1;
        }
    });

    if (carouselArticles.length) {
        return (
            <NewsCarousel
                articles={carouselArticles}
                category={group}
                title={userProvidedHeading.length ? userProvidedHeading : group.title.value}
                showSummary={group.showSummary.value}
                isRSS={isRss}
            />
        );
    }

    return articlesArray;
}

}

新闻轮播IProps

interface IProps {
/** category of the news */
title: string;
/** an array of news articles to be rendered */
articles: NewsArticle.INewsArticle[];
/** news category */
category?: NewsGroup.INewsGroup;
/** current cms control that will be rendered */
control?: ICmsControl;
/** If false, don't render the summary text, set via admin setting. */
showSummary?: boolean;
/** If news Feed is RSS news feed. */
isRSS?: boolean;}

新闻文章界面

export namespace NewsArticle {
    export const groupName = 'entities';
    export const itemKind = 'NewsDocument';
export interface INewsArticle extends IStoreData {
    title: Value<string>;
    displayUrl: Value<string>;
    description: Value<string>;
    image: Value<string>;
    createdBy: Value<Profile.IProfile>;
    titleLink: Value<string>;
    openNewWindow: Value<boolean>;
    dateCreated: Value<DateTimeEx>;
    displayDate: Value<DateTimeEx>;
    feedType: Value<string>;
    newsBody: Value<string>;
    parentCategory?: Value<string>;
    folderDisplayUrl?: Value<string>;
    hash?: Value<string>;
    approved: Value<boolean>;
    permissionValue?: Value<number>;
}

如何对值进行硬编码 有人能帮忙吗？ 我想硬编码并在前端传递数据。